网站首页 » 前端开发 » 前端工具 » Echarts 技巧整理
上一篇:
下一篇:

Echarts 技巧整理

Echarts 3.x

这篇文章收集了 Echarts 在平时开发中常用的一些配置项,没有过多的语言,直接上码。有了它可以让你更省时,因为这引会更加直接的让你找到你想要的,而不用在官方文档中一个一个点开查找。

容器边距

grid:{
    top:100,
    left:45,
    right:25,
    bottom:45
}

渐变

series: [{
    name: '销售量',
    type: 'bar',
    itemStyle:{
        normal:{
            color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                    {offset: 0, color: '#87edff'},
                    {offset: 0.5, color: '#2cc2dd'},
                    {offset: 1, color: '#094567'}
                ]
            ),
        }
    }
}]

 

toolbox 改图标颜色

toolbox: {
    feature: {
        magicType: {
            show: true,
            type: ['line', 'bar'],
            iconStyle:{
                // 默认色
                normal:{
                    borderColor:'#4584a7'
                },
                // 高亮色
                emphasis:{
                    borderColor:'#00f0ff'
                }
            },
        },
    },
    show: true
}

toolbox 添加自定义图标

toolbox: {
    show: true,
    feature: {
      myTool1: {
        show: true,
        title: '自定义扩展方法1',
        icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
        onclick: function (){
          alert('自定义扩展方法,可添加多个')
        }
      },
      myTool2: {
        show: true,
        title: '自定义扩展方法2',
        icon: 'image://http://yunkus.com/images/yunkus.jpg',
        onclick: function (){
          alert('自定义扩展方法,可添加多个')
        }
      }
    }
}

隐藏刻度和轴线

yAxis: {
   // 刻度
    axisTick: {
        show: false
    },
    // y 轴线
    axisLine: {
        show: false
    },
}

分割线

yAxis: {
  splitArea:{
      show:true,
      areaStyle: {
          // 分割线间的填充颜色
          color: 'rgba(8, 44, 70, 0.82)'
      }
  },
  splitLine: {
      lineStyle: {
          // 分割线颜色
          color: ['#428ec5'],
          width:2
      }
  },
}

legend 项设置

legend: {
    orient: 'horizontal',
    data: [{
        name: '销售量',
        icon: 'image://images/p1.png' // 自定义图标
    },
    {
        name: '增长率',
        icon: 'image://images/p2.png'  // 自定义图标
    }],
    // 宽高
    itemWidth: 12,
    itemHeight: 12,
    // 设置为单选模式
    selectedMode: 'single',
    // 默认选中
    selected: {
        '销售量': true
    },
    textStyle: {
        color: '#fff'
    }
}

事件监听

myChart.on('legendselectchanged', function (param) {
        axisLabelSelectOption(param);
});

// 选中后,更改对应的图标
function axisLabelSelectOption(param) {
    var selected = param.selected;
    if (selected['增长率']) {
        option.legend.data[0].icon = 'image://images/p1.png';
        option.legend.data[1].icon = 'image://images/p2.png';
        // 更改选中项,用于切换到不同的数据
        option.legend.selected['发布数量'] = false;
        option.legend.selected['参与率'] = true;
        // 格式化数据
        option.yAxis[0].axisLabel.formatter = '{value} %';
        myChart.setOption(option);
    }
    if (selected['销售量']) {
        option.legend.data[1].icon = 'image://images/p1.png';
        option.legend.data[0].icon = 'image://images/p2.png';
        // 更改选中项,用于切换到不同的数据
        option.legend.selected['发布数量'] = true;
        option.legend.selected['参与率'] = false;
        // 格式化数据
        option.yAxis[0].axisLabel.formatter = '{value}';
        myChart.setOption(option);
    }
}

myChart 是一个 Echarts 实例。可监听的事件有很多,可以参考官方的文档:http://echarts.baidu.com/api.html#events

 

 

  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/echarts-skills/

发表评论

电子邮件地址不会被公开。 必填项已用*标注

评论 END