• echart 图例设置自定义图标?


    option = {
        legend: {
            orient: 'horizontal', // 'vertical'
            x: 'right', // 'center' | 'left' | {number},
            y: 'top', // 'center' | 'bottom' | {number}
            backgroundColor: '#eee',
            borderColor: 'rgba(178,34,34,0.8)',
            borderWidth: 4,
            padding: 10,    // [5, 10, 15, 20]
            itemGap: 20,
            textStyle: {color: 'red'},
            selected: {
                '降水量' : false
            },
            data: [
                {
                    name:'蒸发量',
                    icon : 'image://../asset/ico/favicon.png',
                    textStyle:{fontWeight:'bold', color:'green'}
                },
                '降水量','最高气温', '最低气温'
            ]
        },
        xAxis :{
            data : ['周一','周二','周三','周四','周五','周六','周日']
        },
        yAxis : [
            {
                type : 'value',
                axisLabel : {
                    formatter: '{value} ml'
                }
            },
            {
                type : 'value',
                axisLabel : {
                    formatter: '{value} °C'
                },
                splitLine : {show : false}
            }
        ],
        series : [
            {
                name:'蒸发量',
                type:'bar',
                data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6]
            },
            {
                name:'最高气温',
                type:'line',
                yAxisIndex: 1,
                data:[11, 11, 15, 13, 12, 13, 10]
            },
            {
                name:'降水量',
                type:'bar',
                data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6]
            }
        ]
    };
    // 动态添加默认不显示的数据
    var ecConfig = require('echarts/config');
    myChart.on(ecConfig.EVENT.LEGEND_SELECTED, function (param){
        var selected = param.selected;
        var len;
        var added;
        if (selected['最低气温']) {
            len = option.series.length;
            added = false;
            while (len--) {
                if (option.series[len].name == '最低气温') {
                    // 已经添加
                    added = true;
                    break;
                }
            }
            if (!added) {
                myChart.showLoading({
                    text : '数据获取中',
                    effect: 'whirling'
                });
                setTimeout(function (){
                    option.series.push({
                        name:'最低气温',
                        type:'line',
                        yAxisIndex: 1,
                        data:[-2, 1, 2, 5, 3, 2, 0]
                    });
                    myChart.hideLoading();
                    myChart.setOption(option);
                }, 2000)
            } 
        }
    });
                 
                        

    参考地址:http://echarts.baidu.com/echarts2/doc/example/legend.html

    如果这篇文章对您有帮助,您可以打赏我

    技术交流QQ群:15129679

  • 相关阅读:
    Android 数据库SQLite的使用简单Demo
    jQuery插件FullCalendar日程表
    Activiti工作流访问路径资源注册和管理
    电子商务中的数据仓库技术
    打开”我的电脑”慢的解决办法
    数据结构定义中的中(大陆地区)美差异
    Wubi离线安装Ubuntu
    C++如何获得U盘的盘符以及U盘相关属性的代码
    浮动引起的文本重影
    定位相关的怪异问题
  • 原文地址:https://www.cnblogs.com/yeminglong/p/9099650.html
Copyright © 2020-2023  润新知