echarts 自定义legend 初始化为灰色

<template>

  <div>

    <!--城市消防安全综合态势 图表 -->

    <div id="main" style="width: 480px; height: 260px"></div>

  </div>

</template>

 

<script>

import cityData from "@/mock/rightCity";

var echarts = require("echarts"); // 引入echart 或者 import echarts from "echarts"

export default {

  name: "home",

 

  // 写在mounted 函数中

  mounted() {

    // 基于准备好的dom，初始化echarts实例

 

    var myChart = echarts.init(document.getElementById("main"));

    var option = {

      backgroundColor: "#091c2e",

      tooltip: {

        trigger: "axis",

        show: true,

      },

      legend: {

        show: true,

        icon: "rect",

        padding: [170, 50, 0, 0],

        // bottom: 0,

        textStyle: {

          fontSize: 12,

          color: "#fff",

        },

        data: [

          {

            name: "全市",

            icon: "rect",

          },

          {

            name: "黄浦",

            icon: "rect",

          },

          {

            name: "徐汇",

            icon: "rect",

          },

          {

            name: "长宁",

            icon: "rect",

          },

          {

            name: "静安",

            icon: "rect",

          },

          {

            name: "普陀",

            icon: "rect",

          },

          {

            name: "虹口",

            icon: "rect",

          },

          {

            name: "杨浦",

            icon: "rect",

          },

          {

            name: "闵行",

            icon: "rect",

          },

          {

            name: "宝山",

            icon: "rect",

          },

          {

            name: "嘉定",

            icon: "rect",

          },

          {

            name: "松江",

            icon: "rect",

          },

          {

            name: "金山",

            icon: "rect",

          },

          {

            name: "青浦",

            icon: "rect",

          },

          {

            name: "奉贤",

            icon: "rect",

          },

          {

            name: "崇明",

            icon: "rect",

          },

          {

            name: "浦东",

            icon: "rect",

          },

        ],

        selected: {

          全市: true,

          黄浦: true,

          徐汇: true,

          长宁: true,

          静安: true,

          普陀: false,

          虹口: false,

          杨浦: false,

          闵行: false,

          宝山: false,

          嘉定: false,

          松江: false,

          金山: false,

          青浦: false,

          奉贤: false,

          崇明: false,

          浦东: false,

        },

      },

      grid: {

        left: "5%",

        right: "5%",

        top: "10%",

        bottom: "40%",

        containLabel: true,

      },

      xAxis: {

        axisLine: {

          show: true,

        },

        axisTick: {

          show: false,

        },

        axisLabel: {

          interval: 0,

        },

        axisLine: {

          // 坐标轴刻度相关设置。

          show: true,

          alignWithLabel: false, // 类目轴中在 boundaryGap 为 true 的时候有效，可以保证刻度线和标签对齐。

          interval: "auto", // 坐标轴刻度的显示间隔，在类目轴中有效。默认同 axisLabel.interval 一样。

          inside: false, // 坐标轴刻度是否朝内，默认朝外。

          length: 5, // 坐标轴刻度的长度。

          lineStyle: {

            // 刻度线的样式设置。

            color: "#fff", // 刻度线的颜色，默认取 axisTick.lineStyle.color。

            width: 1,

            type: "solid", // (实线：'solid'，虚线：'dashed'，星罗棋布的：'dotted')

            shadowColor: "rgba(0, 0, 0, 0.5)",

            shadowBlur: 10,

            shadowOffsetX: 0,

            shadowOffsetY: 0,

            opacity: 1,

          },

        }, // 坐标轴轴线相关设置。

        // data: ['A', 'B', 'C', 'D', 'E', 'F', 'G']

        data: ["2013", "2014", "2015", "2016", "2017", "2018", "2019", "2020"],

      },

      yAxis: {

        type: "value",

        min: "0",

        max: "20",

        axisLine: {

          show: true,

        },

        axisTick: {

          show: false,

        },

        axisLine: {

          // 坐标轴刻度相关设置。

          show: true,

          alignWithLabel: false, // 类目轴中在 boundaryGap 为 true 的时候有效，可以保证刻度线和标签对齐。

          interval: "auto", // 坐标轴刻度的显示间隔，在类目轴中有效。默认同 axisLabel.interval 一样。

          inside: false, // 坐标轴刻度是否朝内，默认朝外。

          length: 5, // 坐标轴刻度的长度。

          lineStyle: {

            // 刻度线的样式设置。

            color: "#fff", // 刻度线的颜色，默认取 axisTick.lineStyle.color。

            width: 1,

            type: "solid", // (实线：'solid'，虚线：'dashed'，星罗棋布的：'dotted')

            shadowColor: "rgba(0, 0, 0, 0.5)",

            shadowBlur: 10,

            shadowOffsetX: 0,

            shadowOffsetY: 0,

            opacity: 1,

          },

        }, // 坐标轴轴线相关设置。

      },

      series: [

        {

          name: "全市",

          type: "line",

          smooth: true,

          symbol: "circle",

          symbolSize: 13,

          lineStyle: {},

          itemStyle: {

            color: "#3366cc",

            borderColor: "#fff",

            borderWidth: 2,

          },

 

          data: cityData.HP,

        },

        {

          name: "黄浦",

          type: "line",

          smooth: true,

          symbol: "circle",

          symbolSize: 13,

          lineStyle: {},

          itemStyle: {

            color: "#dc3912",

            borderColor: "#fff",

            borderWidth: 2,

          },

 

          data: cityData.HP,

        },

        {

          name: "徐汇",

          type: "line",

          smooth: true,

          symbol: "circle",

          symbolSize: 13,

          lineStyle: {},

          itemStyle: {

            color: "#ff9900",

            borderColor: "#fff",

            borderWidth: 2,

          },

 

          data: cityData.XH,

        },

        {

          name: "长宁",

          type: "line",

          smooth: true,

          symbol: "circle",

          symbolSize: 13,

          lineStyle: {},

          itemStyle: {

            color: "#CDCDCD",

            borderColor: "#fff",

            borderWidth: 2,

          },

 

          data: cityData.CN,

        },

        {

          name: "静安",

          type: "line",

          smooth: true,

          symbol: "circle",

          symbolSize: 13,

          lineStyle: {},

          itemStyle: {

            color: "#109618",

            borderColor: "#fff",

            borderWidth: 2,

          },

 

          data: cityData.JA,

        },

        {

          name: "普陀",

          type: "line",

          smooth: true,

          symbol: "circle",

          symbolSize: 13,

          lineStyle: {},

          itemStyle: {

            color: "#990099",

            borderColor: "#fff",

            borderWidth: 2,

          },

 

          data: cityData.PT,

        },

        {

          name: "虹口",

          type: "line",

          smooth: true,

          symbol: "circle",

          symbolSize: 13,

          lineStyle: {},

          itemStyle: {

            color: "#0099c6",

            borderColor: "#fff",

            borderWidth: 2,

          },

 

          data: cityData.HK,

        },

        {

          name: "杨浦",

          type: "line",

          smooth: true,

          symbol: "circle",

          symbolSize: 13,

          lineStyle: {},

          itemStyle: {

            color: "#dd4477",

            borderColor: "#fff",

            borderWidth: 2,

          },

 

          data: cityData.YP,

        },

        {

          name: "闵行",

          type: "line",

          smooth: true,

          symbol: "circle",

          symbolSize: 13,

          lineStyle: {},

          itemStyle: {

            color: "#66aa00",

            borderColor: "#fff",

            borderWidth: 2,

          },

 

          data: cityData.MH,

        },

        {

          name: "宝山",

          type: "line",

          smooth: true,

          symbol: "circle",

          symbolSize: 13,

          lineStyle: {},

          itemStyle: {

            color: "#b82e2e",

            borderColor: "#fff",

            borderWidth: 2,

          },

 

          data: cityData.BS,

        },

        {

          name: "嘉定",

          type: "line",

          smooth: true,

          symbol: "circle",

          symbolSize: 13,

          lineStyle: {},

          itemStyle: {

            color: "#994499",

            borderColor: "#fff",

            borderWidth: 2,

          },

 

          data: cityData.JD,

        },

        {

          name: "松江",

          type: "line",

          smooth: true,

          symbol: "circle",

          symbolSize: 13,

          lineStyle: {},

          itemStyle: {

            color: "#22aa99",

            borderColor: "#fff",

            borderWidth: 2,

          },

 

          data: cityData.SJ,

        },

        {

          name: "金山",

          type: "line",

          smooth: true,

          symbol: "circle",

          symbolSize: 13,

          lineStyle: {},

          itemStyle: {

            color: "#aaaa11",

            borderColor: "#fff",

            borderWidth: 2,

          },

 

          data: cityData.JS,

        },

        {

          name: "青浦",

          type: "line",

          smooth: true,

          symbol: "circle",

          symbolSize: 13,

          lineStyle: {},

          itemStyle: {

            color: "#6633cc",

            borderColor: "#fff",

            borderWidth: 2,

          },

 

          data: cityData.QP,

        },

        {

          name: "奉贤",

          type: "line",

          smooth: true,

          symbol: "circle",

          symbolSize: 13,

          lineStyle: {},

          itemStyle: {

            color: "#329262",

            borderColor: "#fff",

            borderWidth: 2,

          },

 

          data: cityData.FX,

        },

        {

          name: "崇明",

          type: "line",

          smooth: true,

          symbol: "circle",

          symbolSize: 13,

          lineStyle: {},

          itemStyle: {

            color: "#a9c413",

            borderColor: "#fff",

            borderWidth: 2,

          },

 

          data: cityData.CM,

        },

        {

          name: "浦东",

          type: "line",

          smooth: true,

          symbol: "circle",

          symbolSize: 13,

          lineStyle: {},

          itemStyle: {

            color: "#8b0707",

            borderColor: "#fff",

            borderWidth: 2,

          },

 

          data: cityData.PD,

        },

      ],

    };

    myChart.setOption(option);

    // myChart.off('legendselectchanged') //解决重复触发

 

    // myChart.on("legendselectchanged", function (params) {

    //   myChart.setOption({

    //     legend: { selected: { [params.name]: true } },

    //   });

    //   console.log("点击了", params.name);

    //   // do something

    // });

    

  },

};

</script>