zoukankan      html  css  js  c++  java
  • echarts设置了,图例还是不显示问题

    总结下图例不显示问题。百度都说legend要和series的name一直。是的,没毛病。

    下面我总结下单折线图和多折线图的图例设置问题

    先说单折线图的

    // 指定图表的配置项和数据
    var option = {
     legend: {
                show: true,
                right: '10%',
                top: 2,
                icon: 'rect',
                itemWidth: 10,
                itemHeight: 4,
                textStyle: {
                    color: '#1a1a1a',
                    fontSize: 12,
                },
                name:""
            },
         series: [{
                 name: "",
                type: 'line', //图表类型
                // data: [266, 200, 306, 100, 100, 280, 500, 500],
                data: [],
                symbol: 'none',
    
            }]
        
    }
    //页面加载调用接口在写。legend是接口获取的数据,是啥就写啥
     myChart.setOption({
                    xAxis: {
                        data: monthData.reverse()
                    },
                    series: {
                        name:legend,
                        data: saleData.reverse()
                    },
                    legend: {
                        name: legend
                    },
                });
                myChart.resize();

    最开始我在配置图表数据中legend那块写的是data,但是死活不出来。后来去官网看了,里面是name,就改了name,没想到居然出来了。

    下面是多条折现图例配置

    var option = {
     legend: {
                show: true,
                right: '15%',
                top: 12,
                 300,
                height: 100,
                icon: 'rect',
                itemWidth: 10,
                itemHeight: 4,
                textStyle: {
                    color: '#1a1a1a',
                    fontSize: 12,
                },
                data: "",
    
            },
      series: {
                type: "line",
                name: "",
                data: [],
            },
    
    }
    //然后是接口调用的方法中写
             var name = []; //设置图标每条线名称
                for (var i = 0; i < item.data.length; i++) {
                    var obj = new Object();
                    obj.name = item.data[i].name.split("/")[item.data[i].name.split("/").length-1]
                    name[i] = obj;
                }
               console.log(name);
              //折线图数据
                var s_data = [];
                
                for (var j = 0; j < item.data.length; j++) {
                    var saleNum=[];
                 item.data[j].sales_data.map((items) => {
                    let mData = items/10000;
                    saleNum.push(mData);
                });
                var saleName=item.data[j].name.split("/")[item.data[j].name.split("/").length-1];
                    s_temp = {
                        name: saleName,
                        type: "line",
                        symbol: 'none',
                        data: saleNum
                    };
                    s_data.push(s_temp)
                }
     // 柱状图 需要倒序数组
                myChart.setOption({
                    xAxis: {
                        data: monthData.reverse()
                    },
                    legend: {
                        data: name
                    },
                    series: s_data
    
                });
                myChart.resize();
  • 相关阅读:
    css3-13 如何改变文本框的轮廓颜色
    css3-13 css3的3D动画如何实现
    poj 2565 Ants (KM+思维)
    C语言功能 --C
    jQuery简要dom操作
    最近ubuntu 14.04 cpu高入住故障排除
    spring framework 4 源代码阅读器(1) --- 事前准备
    基于Haar特征Adaboost人脸检测级联分类
    ZOJ-3652-Maze(BFS)
    设计模式
  • 原文地址:https://www.cnblogs.com/cyhsmile/p/12581920.html
Copyright © 2011-2022 走看看