Echarts3 主题设置

前言

现在此感谢百度Echarts团队提供的这款优秀的开源产品。Echarts是一款原生js写的图表类库，Echarts能为我们打造一款数据可视化平台提供了良好的图表支持。在如今的前端开发中，站点样式主题css 是要和样式组件的css样式分离的，这样我们就可以根据不同的需求改变我们的站点风格，如春节、中秋等节假日我们都要改变我们的站点风格。同理，百度Echarts团队也为我们提供了这样一套机制（类是Bootstrap的定制，如果没玩过bootstrap就赶紧尝尝鲜）。

Echarts3的在线构建主题：http://echarts.baidu.com/theme-builder/

Echarts3在线构建JS组件（看你最终的需求，需要那些组件，减低js的重量）：http://echarts.baidu.com/builder.html

地图的JSON地名提供：http://echarts.baidu.com/download-map.html

Echarts3的主题下载：http://echarts.baidu.com/download-theme.html

Echarts3主题的使用

<script src="echarts.js"></script>
<!-- 引入 vintage 主题 -->
<script src="theme/vintage.js"></script>
<script>
// 第二个参数可以指定前面引入的主题
var chart = echarts.init(document.getElementById('main'), 'vintage');
chart.setOption({
...
});
</script>

echarts整体给我的感觉有点像vue 的数据驱动View 的实现。希望能为你们的站点提供匹配的数据展示的主题风格。下面的几个主题风格是Echarts官方为我们提供的几种风格。