echarts折线图图例修改，新增全选按钮及其实现方式

最新推荐文章于 2024-06-19 15:55:14 发布
最新推荐文章于 2024-06-19 15:55:14 发布
阅读量1.7k 收藏
点赞数
文章标签： echarts 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45832746/article/details/131434021
版权 
   var echart123_data={
         backgroundColor: "transparent",
  title: {
      text: '分局名称：',  //主
        // subtext: '设备类型：', // 副  
    textStyle: {
        color:'#FFF',
      fontSize: 14,
      fontWeight: 400,
       lineHeight:'-15'
    },
      subtextStyle:{  //副标题样式
            color: '#fff',
            fontSize: 14,
            lineHeight:'120'
        },
    left: "5%",
    top: "5%",
  },
  legend: {
   data:[],
    icon: "circle",
    top: "2%",
    right: "15%",
    left:'14%',
    selected:[],
    itemWidth: 7,
    itemGap: 17,
    textStyle: {
      color: "#fff",
   
    },
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
    
    },
    backgroundColor: "#fff",
    textStyle: {
      color: "#FFF",
    },
    // padding: [10, 10],
     extraCssText: 'background:rgba(0,0,0,0.5);border:none;padding:20px 30px;' ,
  },
  grid: {
    top: "35%",
    right:'5%',
    left:'5%',
    bottom:'1%',
     containLabel: true
  },
  xAxis: [
    {
      type: "category",
      data: [10,11,12,13,14,15,16],
      axisLine: {
        lineStyle: {
          color: "gray",
        },
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        interval: 0,
        textStyle: {
          color: "#fff",
        },
        // 默认x轴字体大小
        fontSize: 12,
        // margin:文字到x轴的距离
        margin: 10,
      },

      boundaryGap: false,
    },
  ],
  yAxis: [
    {
      type: "value",
      axisTick: {
        show: false,
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "gray",
        },
      },
      axisLabel: {
        textStyle: {
          color: "#fff",
        },
      },
      splitLine: {
        show: false,
      },
    },
    {
      type: "value",
      position: "right",
      axisTick: {
        show: false,
      },
      axisLabel: {
        textStyle: {
          color: "#556677",
        },
        formatter: "{value}",
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "#DCE2E8",
        },
      },
      splitLine: {
        show: false,
      },
    },
  ],
  series: [
    {
      name: "张江卡园",
      type: "line",
      data: [10, 10, 30, 12, 15, 3, 7],
     
      smooth: true,
      yAxisIndex: 0,
      showSymbol: false,

    //   itemStyle: {
    //     normal: {
    //       color: colorList[0],
    //       borderColor: colorList[0],
    //     },
    //   },
    },
    {
      name: "奉贤局房",
      type: "line",
      data: [5, 12, 11, 14, 25, 16, 10],
      
      
      smooth: true,
      yAxisIndex: 0,
      showSymbol: false,
    
    //   itemStyle: {
    //     normal: {
    //       color: colorList[1],
    //       borderColor: colorList[1],
    //     },
    //   },
    },
  {
      name: "Adidas1",
      type: "line",
      data: [10, 10, 30, 12, 15, 3, 7],
     
      smooth: true,
      yAxisIndex: 0,
      showSymbol: false,

    //   itemStyle: {
    //     normal: {
    //       color: colorList[2],
    //       borderColor: colorList[2],
    //     },
    //   },
    },
    {
      name: "长寿大楼",
      type: "line",
      data: [5, 12, 11, 14, 25, 16, 10],
      
      
      smooth: true,
      yAxisIndex: 0,
      showSymbol: false,
    
    //   itemStyle: {
    //     normal: {
    //       color: colorList[3],
    //       borderColor: colorList[3],
    //     },
    //   },
    },
  ],
    }

 initEchart123(){
                    
                     
                    var echart123 = echarts.init(
                        document.getElementById('echart123')
                    )
                    echart123_data.series= [
                        {
                            "name": "全选",
                            "type": "line",
                            "data": [

                            ],

                        },
                        {
                            "name": "测试1",
                            "type": "line",
                            "data": [
                                95.43757297171945,
                                4.730221933332013,
                                71.58811460422565,
                                20.648200042409947,
                                43.847631831937136,
                                6.863180801521351,
                                6.489234473492522
                            ],
                            "smooth": true,
                            "yAxisIndex": 0,
                            "showSymbol": false
                        },
                        {
                            "name": "测试1",
                            "type": "line",
                            "data": [
                                5.5444843711831115,
                                10.906327016521988,
                                7.576656655745451,
                                3.7904978371004816,
                                4.453349938527573,
                                71.50610340114847,
                                36.699281707810314
                            ],
                            "smooth": true,
                            "yAxisIndex": 0,
                            "showSymbol": false
                        },
                        {
                            "name": "测试2",
                            "type": "line",
                            "data": [
                                65.14227745334533,
                                45.04419008168126,
                                3.3686263974792574,
                                17.606119386236596,
                                50.8128482661665,
                                29.174517358744033,
                                71.34699216674689
                            ],
                            "smooth": true,
                            "yAxisIndex": 0,
                            "showSymbol": false
                        },
                        {
                            "name": "测试3",
                            "type": "line",
                            "data": [
                                24.31509207042708,
                                16.36766947270194,
                                52.540225598451684,
                                2.4051506680042856,
                                66.19750456294216,
                                22.377474144393016,
                                75.62005900116147
                            ],
                            "smooth": true,
                            "yAxisIndex": 0,
                            "showSymbol": false
                        },
                        {
                            "name": "测试4",
                            "type": "line",
                            "data": [
                                99.20604252997822,
                                45.81084592054352,
                                15.099545479247567,
                                31.045617005131042,
                                50.255500221629944,
                                30.76369171546043,
                                22.959827847204007
                            ],
                            "smooth": true,
                            "yAxisIndex": 0,
                            "showSymbol": false
                        },
                        {
                            "name": "测试5",
                            "type": "line",
                            "data": [
                                40.465689616413236,
                                90.7892073146002,
                                35.1891617250339,
                                77.3442680245374,
                                32.38953123787161,
                                68.74319590012546,
                                16.529498587258384
                            ],
                            "smooth": true,
                            "yAxisIndex": 0,
                            "showSymbol": false
                        },
                        {
                            "name": "测试6",
                            "type": "line",
                            "data": [
                                40.82443626425547,
                                10.158173405777182,
                                40.718842798065744,
                                45.29489287097981,
                                54.788226985687686,
                                51.58545354952375,
                                83.53903133268999
                            ],
                            "smooth": true,
                            "yAxisIndex": 0,
                            "showSymbol": false
                        },
                        {
                            "name": "测试7",
                            "type": "line",
                            "data": [
                                58.326050849346764,
                                53.46551874311398,
                                62.011867915806796,
                                52.49673800926231,
                                3.582776409226396,
                                24.40683474765546,
                                1.5168810592971704
                            ],
                            "smooth": true,
                            "yAxisIndex": 0,
                            "showSymbol": false
                        },
                        {
                            "name": "测试8",
                            "type": "line",
                            "data": [
                                37.89456698174607,
                                57.17106292871386,
                                99.3101007018726,
                                28.909506201019685,
                                99.3420397123222,
                                81.30625954189128,
                                28.139941696610716
                            ],
                            "smooth": true,
                            "yAxisIndex": 0,
                            "showSymbol": false
                        },
                        {
                            "name": "测试9",
                            "type": "line",
                            "data": [
                                93.70730481047993,
                                42.60743609605162,
                                80.76193687581146,
                                5.188067937579555,
                                83.85973075166373,
                                41.358967964916225,
                                47.48341770641067
                            ],
                            "smooth": true,
                            "yAxisIndex": 0,
                            "showSymbol": false
                        },
                        {
                            "name": "测试10",
                            "type": "line",
                            "data": [
                                60.75450833443754,
                                62.55855868234421,
                                89.69175658167914,
                                43.62400966189137,
                                33.61872267579806,
                                95.30863511615215,
                                56.07778031305393
                            ],
                            "smooth": true,
                            "yAxisIndex": 0,
                            "showSymbol": false
                        },
                        {
                            "name": "测试11",
                            "type": "line",
                            "data": [
                                90.20764355592583,
                                11.9176085986048,
                                72.61206216924123,
                                52.081240816003806,
                                63.696773332904044,
                                31.37691570747776,
                                37.37423033136851
                            ],
                            "smooth": true,
                            "yAxisIndex": 0,
                            "showSymbol": false
                        },
                        {
                            "name": "测试12",
                            "type": "line",
                            "data": [
                                42.657964061603046,
                                83.5931647289307,
                                47.97302195875861,
                                71.84655782131128,
                                22.142886628930736,
                                48.7596267633418,
                                99.22979746398492
                            ],
                            "smooth": true,
                            "yAxisIndex": 0,
                            "showSymbol": false
                        },
                        {
                            "name": "测试13",
                            "type": "line",
                            "data": [
                                12.42249743542272,
                                71.78295059308368,
                                32.94306976519881,
                                78.75416474600516,
                                40.93797155738952,
                                16.74646789031733,
                                25.55553929411898
                            ],
                            "smooth": true,
                            "yAxisIndex": 0,
                            "showSymbol": false
                        },
                        {
                            "name": "测试14",
                            "type": "line",
                            "data": [
                                67.27192138887781,
                                91.24681971965529,
                                4.017535592740229,
                                65.4311569582077,
                                98.96593469058989,
                                34.43553461641462,
                                38.20591888853606
                            ],
                            "smooth": true,
                            "yAxisIndex": 0,
                            "showSymbol": false
                        },
                        {
                            "name": "测试15",
                            "type": "line",
                            "data": [
                                87.57318080295478,
                                27.296051569585323,
                                37.61207785108329,
                                60.38895543631333,
                                16.67750852071357,
                                30.97803589860122,
                                91.09452426482794
                            ],
                            "smooth": true,
                            "yAxisIndex": 0,
                            "showSymbol": false
                        },
                        {
                            "name": "测试16",
                            "type": "line",
                            "data": [
                                5.464108824310676,
                                39.34549691444229,
                                13.690129402357677,
                                9.949164036319026,
                                66.52110294542565,
                                29.10382718295057,
                                41.50582005005368
                            ],
                            "smooth": true,
                            "yAxisIndex": 0,
                            "showSymbol": false
                        },
                        {
                            "name": "测试17",
                            "type": "line",
                            "data": [
                                84.03171263038263,
                                90.15260827651956,
                                15.911672884468665,
                                29.98523128677444,
                                61.402606651288764,
                                53.76639777530314,
                                70.50667558430376
                            ],
                            "smooth": true,
                            "yAxisIndex": 0,
                            "showSymbol": false
                        },
                        {
                            "name": "测试18",
                            "type": "line",
                            "data": [
                                95.58200582025096,
                                63.684533712459256,
                                94.22332824011399,
                                36.601663359958316,
                                23.827464155817868,
                                64.33043209316487,
                                93.50748617168438
                            ],
                            "smooth": true,
                            "yAxisIndex": 0,
                            "showSymbol": false
                        },
                        {
                            "name": "测试19",
                            "type": "line",
                            "data": [
                                6.461374241214934,
                                25.95432687567496,
                                64.04976775163877,
                                24.675677655211658,
                                15.037676442362113,
                                43.405276084829225,
                                15.729288810234676
                            ],
                            "smooth": true,
                            "yAxisIndex": 0,
                            "showSymbol": false
                        },
                        {
                            "name": "测试21 ",
                            "type": "line",
                            "data": [
                                54.46666237933901,
                                84.00427643905886,
                                84.5362724757823,
                                57.39367741793539,
                                58.12204919326185,
                                98.59176847426329,
                                68.28168362315357
                            ],
                            "smooth": true,
                            "yAxisIndex": 0,
                            "showSymbol": false
                        },
                        {
                            "name": "测试22",
                            "type": "line",
                            "data": [
                                50.515566206334924,
                                94.93150546235005,
                                35.401465416205255,
                                29.97549647008304,
                                53.463013412243555,
                                93.25412711375284,
                                68.1683753101225
                            ],
                            "smooth": true,
                            "yAxisIndex": 0,
                            "showSymbol": false
                        },
                        {
                            "name": "测试23",
                            "type": "line",
                            "data": [
                                26.843524189071367,
                                94.3024648034414,
                                21.33997098776199,
                                82.61767720314093,
                                78.54777780383971,
                                16.390981682470883,
                                91.33366389159102
                            ],
                            "smooth": true,
                            "yAxisIndex": 0,
                            "showSymbol": false
                        },
                        {
                            "name": "测试24",
                            "type": "line",
                            "data": [
                                8.814499839601764,
                                77.1469143335213,
                                88.27135796132556,
                                19.201279693759155,
                                37.34712075781999,
                                61.89982820261803,
                                99.7332244522442
                            ],
                            "smooth": true,
                            "yAxisIndex": 0,
                            "showSymbol": false
                        }
                          
                    
                    ]
                    let arr=[]
                    for (let index = 0; index < echart123_data.series.length; index++) {
                        const element = echart123_data.series[index];
                        arr.push(element.name)
                        
                    }
                     
                    echart123_data.legend.data=arr
                  
                    console.log(arr);
                    // CockpitMain.GetSpaceTimeWorkOrderCounts().then((res) => {
                    //     if (res.ok) {
                    //         let result = res.data
                    //         worktrend_data.xAxis[0].data = result.xDatas
                    //         worktrend_data.series[0].data = result.yDatas
                    //     }
                             echart123.on('legendselectchanged', function (params) {
                              if (params.name == '全选') {
                                let current = params.selected['全选']
                                if(current){
                                    for (const key in params.selected) {
                                        if (Object.hasOwnProperty.call(params.selected, key)) {
                                           if(key!= '全选'){
                                             const element = params.selected[key];
                                               console.log(element, key);
                                               params.selected[key] = true
                                                 console.log(element, key);
                                           }
                                           
                                        }
                                    }
                                    // echart123.clear()
                              echart123_data.legend.selected= params.selected
                                    echart123.setOption(echart123_data);
                                }else{
                                     for (const key in params.selected) {
                                        if (Object.hasOwnProperty.call(params.selected, key)) {
                                           if (key != '全选') {
                                                const element = params.selected[key];
                                                console.log(element, key);
                                                params.selected[key] = false
                                                  console.log(element, key);
                                            }
                                        }
                                    }
                                    // echart123.clear()
                                     echart123_data.legend.selected = params.selected
                                    echart123.setOption(echart123_data);
                                }
                              }
                                
                                

                        // if (params.name == '全选') {
                        //     var selectMark = option.legend.selected['全选']   //获取图例中的全选状态，作为一个标记变量
                        //     //option为上面的Echarts对象
                        //     var data = option.legend.data
                        //     if (selectMark) {        //判断
                        //         for (var i = 0; i < data.length; i++) {
                        //             option.legend.selected[data[i]] = false
                        //         }
                        //     } else {
                        //         for (var i = 0; i < data.length; i++) {
                        //             option.legend.selected[data[i]] = true
                        //         }
                        //     }
                        //     this.setOption(option)
                        // }
                    })
                    
                    echart123.clear()
                        echart123.setOption(echart123_data);
                    // })
                    window.addEventListener('resize', () => {
                        echart123.resize()
                    })
                },
brave,
关注
Echarts图标tooltip添加按钮点击.zip
07-06
tooltip中添加一个查看按钮，并且点击获得触发点的数据进行操作 ehcarts显示正常，并且在toopltip中添加formatter(params)函数对toopltip进行html设置显示按钮，点击跳转其他页面
echarts实用经验：tooltip悬浮框添加button按钮；toolbox添加自定义按钮；显示隐藏切换导致图表太小渲染不及时的解决办法
qq_33235680的博客
04-27 5315
echarts实用经验：tooltip悬浮框添加button按钮（点击事件）；toolbox添加自定义按钮；显示隐藏切换导致图表太小渲染不及时的解决办法
echarts dataZoom用按钮代替鼠标滚轮实现同样效果
最新发布
敲代码无敌小奶龙的博客
06-19 1500
echarts dataZoom用按钮代替鼠标滚轮实现同样效果
在Echarts中的tooltip上添加点击按钮
Hy_0452的博客
08-09 2522
在Echarts的tooltips中添加点击按钮并可以鼠标悬停点击该按钮。
echarts图例样式修改
Olay_ya的博客
01-12 901
echarts图例样式修改
Echarts添加全选图例，Echarts中legend添加全选功能，Echarts控制legend图例显示个数，
weixin_41346436的博客
10-21 3005
Echarts添加全选图例 一般Echarts的引入渲染，有两种方式，一种是组件的方式引入，添加:options对象给渲染，另一种是获取元素节点，利用echarts.init初始化，使用setOption插入值渲染 组件引入 获取元素节点渲染 效果图 此处案例是第一种方式引入并渲染的，直接上代码 在页面的组建中引入 <div> <vabChart id="main" style="width: 100%; height: 600px"
echars图表自定义按钮
m0_37128767的博客
05-20 3646
echars图表自定义按钮
Echars添加自定义按钮并且下载为pdf，y轴文字根据条件变换背景色
sccscswwe的博客
02-22 403
【代码】Echars添加自定义按钮并且下载为pdf。
js全选按钮的实现方法
10-23
此外，如果要实现全选和反选（即一键选中所有选项或一键取消选择所有选项），我们可以在`changeState`函数的基础上稍作修改，增加一个判断条件来实现反选功能。例如，可以通过在全选复选框上添加`onchange`事件来...
Echarts使用一个图例legend实现全选和全部取消的功能
weixin_30799995的博客
06-04 3162
1、修改legend的data值，在前面加上全选和全不选，data = ['全选'，'全不选'，1,2,3] 2、监听legendselectchanged事件 / 使用刚指定的配置项和数据显示图表 var selectArr = option.legend.data; myChart.on('legendselectchanged', function(obj) { var se...
echarts折线图全选
08-09
在Echarts中，如果你想实现折线图的全选功能，可以通过以下几个步骤来完成。首先，你需要在图例中添加一个“全选”选项。你可以使用自定义的方式来添加这个选项，具体的实现方式可以参考引用中的描述。然后，你需要...
echarts 自定义按钮实现全屏
11-05
自定义echarts全屏功能，并退出（可以从GitHub上下载源码） 地址（https://blog.csdn.net/qq453627768/article/details/73550200） https://github.com/453627768/453627768echart.github.io
Echarts雷达图自定义添加的“全选”图例，全选勾选情况下，悬浮窗禁止显示，提示框显示错误Bug解决方案，雷达图的数值添加 %
weixin_41346436的博客
12-09 1580
Echarts用了很多类型的图表了，才发现雷达图和其他柱状图折线图还真不一样，此次记录的问题是Echarts自定义添加的“全选”图例，全选勾选情况下，提示框显示错误Bug解决方案，雷达图的数值添加 % 效果图 当勾选全选，鼠标放在最中间，之前的问题是这样的，有数据展示但是是错误的 之所以不好处理，是因为雷达图中的series中的data的value值只能为数字，不可以百分比，所以%只能前端拼接添加了，其次折线图，柱状图的formatter所带参数输出的seriesName为当前的正确数据，而雷达图的所有
echarts上放置按钮
easyboot的专栏
12-31 7072
想在echarts上放置按钮，发现绘图后会把按钮覆盖掉，所有考虑使用div重叠实现按钮在最前面 注意Position和z-index的设置 <div style="width: 100%;min-height: 200px;position:relative"> <!--这里是echarts绘图区域--> <div id="divO...
Echarts 报表 使用一个图例legend实现全选和全部取消的功能
06-17 2133
//圆柱图 function getEchart3(id) { var date = $("#Date").val(); var option3 = { tooltip: { trigger: 'axis', axisPointer: { // 坐标轴指示器，坐标轴触发有效 type...
ECharts自定义toolbox中增加自定义按钮
热门推荐
danielinbiti的专栏
04-22 6万+
今天想能不能在ECharts中的ToolBox增加自己的按钮，然后读了一下ToolBox代码，自己试了试，验证是可以的。 1、效果图 图片中红色框起来的按钮 2、代码 selfButtons:{//自定义按钮 danielinbiti,这里增加，selfbuttons可以随便取名字 show:true,//是否显示
echarts 修改图例说明样式
u014645827的博客
06-30 871
【代码】echarts 修改图例说明样式。
echarts图表 折线图样式
qq_70036866的博客
08-17 2205
值:'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'data: ['2月28', '3月01', '3月02', '3月03', '3月04', '3月05', '3月06'],color: ['#0078ff', '#00ffcc'], //两条折线的颜色。// color: 'red', // 可以直接填充颜色。name: '个', // y轴的单位,不写就没有。name: '隐患排查',
echarts toolbox 图片自定义隐藏区域缩放按钮并添加自定义按钮
鸣的博客
10-13 2194
原文链接：https://blog.csdn.net/weixin_36485371/article/details/113031376。注意点：icon的设置需要通过'image://url'设置为图片，其中 URL 为图片的链接，或者dataURI。(1)、URL 为图片链接例如：'image://http://xxx.xxx.xxx/a/b.png'(3)、通过'path://'将图标设置为任意的矢量路径。如果是url的话，路径前必须添加上“image://“(4)、注意点：项目本地图片可以采用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值