echarts常見配置項總結，legend、toolbox、tooltip等

1、餅狀圖指示線改變顏色：series.labelLine.lineStyle

series : [
　　{
　　　　name: '默認文字',
　　　　type: 'pie',//類型餅狀圖
　　　　hoverAnimation:false,//去掉懸停效果
　　　　radius : ['0', '126px'],//半徑長度
　　　　center: ['50%', '50%'], //圓心位置
　　　　labelLine:{
　　　　lineStyle:{
　　　　　　color:'#e1e1e1',
　　　　}
　　},
]

 

2、改變echarts顏色：color 
 color: ['#5f9dff','#6be1c1','#ffed79','#ee5959','#7d92d4'] 

3、去掉懸停效果：hoverAnimation:false,

4、radius 半徑長度，內半徑，外半徑，內半徑大時為弧形
center 圓心位置，距離top，距離left

radius : ['0', '126px'],
center: ['50%', '50%'], 

 

5、設置提示框大小（首先將默認padding設置為0，默認padding為5）

extraCssText:'width:210px;height:72px;',

 

6、x,y軸設置

xAxis : [
{
　　type : 'category',//類目
　　data : ['個人pc', '未知', '趙雪松'],
　　axisTick: {
　　　　alignWithLabel: true
　　},
// x軸的字體樣式
axisLabel: { 
　　show: true, //控制坐標軸x軸的文字是否顯示
　　textStyle: {
　　color: '#758697', //x軸上的字體顏色
　　fontSize:'16' // x軸字體大小
}
},
// x軸網格線
splitLine: {
　　show: false, // 網格線是否顯示
　　// 改變樣式
　　lineStyle: {
　　　　color: '#f5f7fb' // 修改網格線顏色 
　　} 
},
// x軸的顏色和寬度
axisLine:{
　　lineStyle:{
　　color:'#758697', // x坐標軸的軸線顏色
　　width:1, //這里是坐標軸的寬度,可以去掉
　　}
}
}
],

y軸同理，同時type=value時，y軸會根據最大data自動調整，例如data最大是7100，那y軸最大就是8000。

7、legend圖例改變形狀，使用icon，默認圓角矩形roundRect，可選項有'circle' 橢圓，'rect' 矩形， 'roundRect' 圓角矩形 '，triangle' 三角形， 'diamond' 菱形， 'pin' 正圓 ，'arrow' 箭頭

legend: {
　　data: ['輕危', '低危', '中危', '高危','嚴重'],
　　icon: 'rect',
　　itemWidth:11,//圖例圖標寬度
　　itemHeight:11//圖例圖標高度
},

 

8、toolbox工具箱自定義使用圖片

toolbox: {
　　show: true,//是否顯示
　　orient: 'horizontal',//方向
　　left: '460',//距左
　　top: '2',//距上
feature:{
//自定義工具，只能以my開頭
myTool1: {
　　show: true,
　　title: '自定義擴展方法',//懸停出現的文字
　　icon: 'path://M177.193 129.05c21.434 0.286 65.125 21.714 115.003 69.194 50.095 47.687 94.168 109.882 117.893 166.372 39.792 94.744 74.588 168.862 115.064 222.632 20.141 26.756 41.87 48.79 66.429 67.361 22.557 17.057 47.806 31.572 79.458 45.681 26.973 12.022 53.058 23.351 78.284 34.306 59.956 26.038 111.735 48.526 151.584 69.851 19.045 10.192 34.16 19.539 44.925 27.781 3.584 2.744 6.348 5.107 8.459 7.071-6.678 8.162-18.899 20.247-37.119 32.605-27.221 18.463-48.188 24.436-54.078 24.436l-296.64 0c-7.312 0-22.587-9.804-43.529-37.32-25.525-33.536-50.578-80.925-77.103-131.097-11.922-22.549-24.249-45.867-36.932-68.44-18.883-33.608-41.454-65.243-63.555-89.079-14.25-15.369-28.556-27.772-42.52-36.862-21.108-13.741-42.546-20.708-63.721-20.708-20.726 0-40.298 8.834-55.112 24.874-7.27 7.872-13.389 17.403-18.709 29.138-6.438 14.203-12.067 32.557-17.206 56.111-7.442 34.105-14.172 80.778-20.003 138.721-0.571 5.671-1.122 11.339-1.654 16.98-3.535-63.121-9.031-121.409-16.461-174.394-11.999-85.568-26.548-140.758-36.176-177.278-4.005-15.19-8.542-32.401-8.774-37.841 0.02-40.441 10.818-103.183 20.51-134.252 16.992-54.469 39.819-85.554 55.977-102.04C159.02 134.961 173.235 129.608 177.193 129.05M176.762 65.047c-40.449 0-113.666 46.786-152.348 170.786-11.617 37.24-23.413 106.87-23.413 153.423 0 49.518 66.166 157.577 66.166 570.084 26.001 0 110.95 0 110.95 0s16.014-382.506 60.98-382.506c36 0 84.161 60.893 114 114 68.656 122.192 127.924 269.506 213.36 269.506 116.64 0 245.425 0 296.64 0 57 0 159.905-75.506 159.905-121.924 0-64.444-148.651-117.577-325.905-196.582-102.162-45.536-144-102-228-302C412.479 205.03 269.096 65.047 176.762 65.047L176.762 65.047z',//svg圖片坐標
　　onclick: function (){
　　　　alert('myToolHandler')
　　}//點擊圖片事件
},

icon為主要，也可以放在本地，使用icon:'image://../assets/ico/echarts.png',
官網配置項解釋：http://echarts.baidu.com/option.html#toolbox.feature
阿里巴巴矢量圖片庫：http://www.iconfont.cn/collections/detail?cid=5186（下載svg后使用ide打開粘貼path路徑代碼即可）

9、線形圖懸停想出現 ‘線 ’非陰影，type:'line',

series: [
{
　　name:'惡意代碼數',
　　type:'line', 
　　data: [3.9, 5.9, 11.1, 18.7, 48.3, 69.2, 231.6, 46.6, 55.4, 18.4, 10.3, 0.7]
},
{
　　name:'已清除惡意代碼數',
　　type:'line',
　　data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
}
],

 

10、當想提示出現兩種以上顏色以及調整間距等，需要自定義tooltip
官網解釋:http://echarts.baidu.com/option.html#tooltip.formatter
我的例子：

formatter : function (params) {
　　var rec = '';
　　for(var i = 0;i < params.length;i++){
　　　　var rea = '<div style="margin-top:20px;margin-left:20px;color:#f7f8f9 ;margin-right:20px;margin-bottom:10px;">'+ params[i].axisValue + '</div>';
　　　　var reb = '<div style="margin-left:20px;margin-right:20px;margin-bottom:10px;">'+'<span style="display:inline-block;margin-right:5px;border-radius:8px;width:8px;height:8px;background-color:'+ params[i].color +';"></span>'+ params[i].seriesName +':'+params[i].data+'</div>';
　　　　rec= rec + reb;
　　}
　　return rea + reb;
},

懸停時觸發formatter事件，傳入參數params是數組套json的格式，大家可以console.log(params) 一下，就會用了
邏輯是這樣，定義一個外部變量rec存放循環出來的HTML代碼語句，rea是標題語句，只需要重復一次，reb是下面內容。效果如下圖所示。

 

11、環形圖中間自定義文字顯示，定義配置項graphic

graphic 是原生圖形元素組件。可以支持的圖形元素包括：image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group,

echarts配置項官網：http://echarts.baidu.com/option.html#graphic

        graphic:[{
              type:'text',
              left:'center',
              top:'center',
              style:{
                  text:'數學\n',
                  textAlign:'center',//水平居中
                  fill:'#C23531',//字體顏色
                  width:50,
                  height:30,
                  font: '20px "STHeiti"'//字體大小
            }},
            {
              type:'text',
              left:'center',
              top:'center',
              style:{
                  text:"\n" + this.mathspercent,//從后台傳入的百分比
                  textAlign:'center',
                  textVerticalAlign :'bottom',//垂直居中
                  fill:'#CCCCCC',
                  width:100,
                  height:100,
                  font: '20px "STHeiti"'
              },
            }],

如圖所示：