zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    IE7局部滚动区域下绝对定位或相对定位元素不随滚动条滚动的bug
    Webstorm编译TypeScript报错
    Javascript动态创建 style 节点
    css多栏自适应布局
    禁用右键
    Mac下启动和停止Mysql服务
    codemirror
    JavaScript 中的事件流和事件处理程序(读书笔记思维导图)
    mac压缩文件乱码
    Mybatis框架五:动态SQL
  • 原文地址:https://www.cnblogs.com/yeminglong/p/9099650.html
Copyright © 2011-2022 走看看