echarts常见配置项总结，legend、toolbox、tooltip等

最新推荐文章于 2024-01-03 14:21:35 发布

bangyonggui4360

最新推荐文章于 2024-01-03 14:21:35 发布

阅读量697

点赞数

文章标签： javascript json ViewUI

原文链接：http://www.cnblogs.com/ps0327/p/8514242.html

版权

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"'
              },
            }],