ECharts心得——常用图表的参数设置

Echarts使用有很多方式，这里我来说在 webpack 中使用 ECharts...

2.引入 ECharts

可以直接在项目中引用，这里是在main,js引用

3.直接使用

这样简单的一个图表就成功了 如下图：

下面直接奔入主题，对于一些公司的业务需要与图表打交道，比如大数据可视化平台，echarts就可以完美胜任了。

但是对于刚接触echarts的或者是不经常用的朋友，虽说简单好用 但是去改变echarts图表的样式还是很费时的。

毕竟官网的实例与公司业务或者UI的设计有些出入。。这样就需要改里面的参数了。

下面是我用到的图表总结的一些参数设置，我就不一一手写解释了，直接用图来展现出来

今天先整理到这里，后期增加关系图、仪表盘、散点图 以及我们的大地图......

整理地图相关参数：

①②③④

JSON引入方式

地图属性设置都会在geo对象中设置相应参数，下面介绍常用参数：

地图上的内容主要在serise中设置，

1、下载好开发包后就可以开始了，第一步引入开发包，和需要的主题文件（可定义自己的主体文件），并定义好页面布局。2.0以后上的版本，需要把开发包放到body下，否则ie低版本会出现属性未找到的错误，导致图标初始化失败。

2、第二步，普通初始化图表，通过调用开发包方法，有两种初始化方式，

1.var myChart = echarts.init(document.getElementById("echart"))

2.var myChart=require('echarts').init(document.getElementById("echart"))

一般建议使用第一种方法进行初始化 *** 作。

3、第三步，设置option属性，来给图表设置数据,option是数组元素，tooltip：提示框，legend图例，calculable可设置是否拖拽，series设置数据（data类型也为数组类型），开始先随机初始化几条模拟数据，

4、到这一步，就完成了，图表初始化的步骤，效果如下图所示。然后大家可以改变下图标的样式，2.0版本留了设置主题的方法，可设置setThem()对图表样式进行修改。

5、看看主题怎么配置，设置色版，设置主题颜色，不一一介绍了，请大家请看下面代码：

6、通过上面主题的添加完成了对样式的修改，当然最后大家记嘚设置myChart.setTheme(theme)

1、打开echarts官方实例页面，点击第一个折线图。

2、进入页面后，可以看到数据比较少，所以横坐标文字全部都显示出来了。

3、修改左侧的option内容，在xAxis的data数组中再添加两行内容，同时，在series中添加对应数量的值。

4、运行后，可以看到x横坐标已经按照图形大小，自动间隔显示了文字。如果没有特殊要求，这个就可以满足当内容少时，全部显示横坐标文字，当内容多时，自动间隔显示文字。

5、在option的xAxis区域添加axisLabel:{interval:0}，这个语句的意思是，设置横坐标的文字全部显示，不间隔。

6、再次运行就可以看到横坐标的内容全部显示了，但是由于空间不够，内容都挤到一起去了。

7、将间隔值修改为5，axisLabel:{interval:5}，再次运行，就可以看到x横坐标内容已经按照要求间隔显示了。

---