echarts自定义工具栏

自定义工具栏:将折线图变为柱状图 

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
      toolbox: {
        feature : {
             myPie: {
                show: true,
                title: '测试',
                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 (){
                     //获取当前echarts实例
                    var myCharts = echarts.init(document.getElementById('chart-panel'))
                   //series为Array类型可以转换为line(折线),bar(柱状);
                    //series为Object类型则转换为pie(饼图),饼图的数据源格式和line,bar都不一样
                    if(option.series instanceof Array){
                        for(let i in option.series){
                            option.series[i].type = 'bar'
                        }
                    }else{
                         option.series.type = 'pie'
                         option.legend ={
                              orient: 'vertical',
                            left: 'left',
                            data: option.xAxis.data
                         }
                        let list = []
                        for(let i in option.xAxis.data){
                            let dict = {}
                            dict.name = option.xAxis.data[i]
                            dict.value = option.series.data[i]
                            list.push(dict)
                        }
                       delete  option.xAxis;
                       delete  option.yAxis;
                        option.series.data = list
                    }
                    myCharts.clear()
                    console.log(option,'cc')
                    myCharts.setOption(option)
                }
            }
        }
    },
    series: {
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
    }
};
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值