1.主题设置 ``` //初始化中方法，可以输入第二个参数，内置有light和dark两种主题，也可以自定义主题，去官网定制下载引用即可， //主题名称是下载的js中注册的名称 var myCharts = this.$echarts.init(document.getElementById('chart'),'dark'); ``` 2.调色盘，图表会自动从中选择颜色，优先级（就近原则）：局部 > 全局 > 主题 ``` 主题调色盘 ： 主题自带的调色 全局调色盘：option配置中可以配置color属性 局部调色盘：series中配置的color对象属性 ``` 3.颜色渐变 ``` a. 线性渐变,series中配置 itemStyle : { // color:'blue',//固定颜色 color:{ type : 'linear',//线性渐变 x : 0,//渐变的方向 y : 0, x2 : 0, y2 : 1, colorStops : [ {offset:0,color:'red'},//0%处的颜色是红色 {offset:1,color:'blue'},//100%处的颜色是蓝色 ] } } b.径向渐变,series中配置 itemStyle : { color:{ type : 'radial',//径向渐变 x : 0,//渐变的方向 y : 0.5, r : 0.5, colorStops : [ {offset:0,color:'red'},//0%处的颜色是红色 {offset:1,color:'blue'},//100%处的颜色是蓝色 ] } } ``` 线性渐变图：  径向渐变图:  #### 4.自适应大小 ``` //监听窗口改变，自适应大小 window.onresize = function(){ myCharts.resize() } //或者这样写：window.onresize = myCharts.resize; ``` 5.加载动画 数据加载前显示loading：`myCharts.showLoading();//加载loading动画` 数据加载结束关闭动画 ： `myCharts.hideLoading();//关闭loading动画` 6.setoption()方法可以多次使用，多次使用会对数据进行整合，找出差异，重新渲染，重复使用只需要对数据进行修改，不需要修改配置项 7.动画效果配置 ``` // 配置项 var option = { animation : true,//动画效果，默认打开 // animationDuration : 7000,//动画延时时间， animationDuration : function(arg){//通过回调函数控制延时时间 // 返回的是索引 return 2000 * arg;//后面的数据加载越久 }, animationEasing : 'bounceOut',//缓动动画效果：linear：匀速，bounceOut：回弹效果... animationThreshold : 8,//动画阈值，单种元素的数量大于这个值，动画不显示 } ``` 8.事件 ``` // 点击事件 myCharts.on('click',function(arg){ console.log(arg,1111111) }); //解绑点击事件 myCharts.off('click'); //监听图例组件改变事件，方法名+回调函数 myCharts.on('legendselectchanged',function(arg){ console.log(arg) }); var btn = document.getElementById('btn');//触发按钮 var clearBtn = document.getElementById('btn1');//清空按钮 var setBtn = document.getElementById('btn2');//重置set按钮 var disposeBtn = document.getElementById('btn3');//重置set按钮 // dispatchAction方法，模拟用户行为 btn.onclick = function(){ myCharts.dispatchAction({ type : 'highlight',//类型：变成高亮 seriesIndex : 0,//系列的索引 dataIndex : 1,//数据的索引 }); myCharts.dispatchAction({ type : 'showTip',//类型：显示提示文字 seriesIndex : 0,//系列的索引 dataIndex : 2,//数据的索引 }); }; //清空事件,clear() clearBtn.onclick = function(){ myCharts.clear(); }; //setOption重置 setBtn.onclick = function(){ myCharts.setOption(option); }; // 销毁，无法重置dispose disposeBtn.onclick = function(){ myCharts.dispose(); }; ``` 事件案例： :-: