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.5  onclick: function (){
    alert('myToolHandler')
  }//点击图⽚事件
},
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]
}
],
formatter : function (params) {
  var rec = '';
  for(var i = 0;i < params.length;i++){
    var rea = '<div >'+ params[i].axisValue + '</div>';
    var reb = '<div >'+'<span ></span>'+ params[i].ser    　rec= rec + reb;
  }
  return rea + reb;
},
悬停时触发formatter事件，传⼊参数params是数组套json的格式，⼤家可以console.log(params) ⼀下，就会⽤了
逻辑是这样，定义⼀个外部变量rec存放循环出来的HTML代码语句，rea是标题语句，只需要重复⼀次，reb是下⾯内容。效果如下图所⽰。
11、环形图中间⾃定义⽂字显⽰，定义配置项graphic
graphic 是原⽣图形元素组件。可以⽀持的图形元素包括：, , , , , , , , , , , ,
graphic:[{
type:'text',
left:'center',
top:'center',
style:{
text:'数学\n',tool工具箱
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"'
},
}],
如图所⽰：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。