【无标题】

记录一次踩坑

<template>
  <div class="more-container">
    <div ref="myChart" style="width: 1220px; height: 600px"></div>
  </div>
</template>

<script>
  import * as echarts from 'echarts'
  export default {
    name: 'More',
    components: {},
    data() {
      return {
        nodeEnv: process.env.NODE_ENV,
        myChart: null,
        selectedDataIndex: null,
        chartOption: {
          // 图表配置项
        },
      }
    },
    created() {},
    mounted() {
      this.initChart()
      this.setChartOption()
      this.bindChartEvents()
    },
    beforeDestroy() {
      if (this.myChart) {
        this.myChart.dispose()
      }
    },
    methods: {
      initChart() {
        this.myChart = echarts.init(this.$refs.myChart)
        this.chartOption = {
          title: {
            text: 'Stacked Line',
          },
          tooltip: {
            trigger: 'axis',
          },
          legend: {
            data: ['aaa', 'bbb', 'ccc', 'ddd', 'eee'],
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true,
          },
          toolbox: {
            feature: {
              saveAsImage: {},
            },
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['1', '2', '3', '4', '5', '6', '7'],
          },
          yAxis: {
            type: 'value',
          },
          series: [
            {
              name: 'aaa',
              type: 'line',
              stack: 'Total',
              data: [120, 132, 101, 134, 90, 230, 210],
              symbolSize: 12,
              emphasis: {
                itemStyle: {
                  color: 'gray',
                },
              },
              itemStyle: {
                normal: {
                  borderWidth: 12, // 设置拐点的大小
                },
              },
            },
            {
              name: 'bbb',
              type: 'line',
              stack: 'Total',
              data: [220, 182, 191, 234, 290, 330, 310],
              symbolSize: 12,
              emphasis: {
                itemStyle: {
                  color: 'gray',
                },
              },
              itemStyle: {
                normal: {
                  borderWidth: 12, // 设置拐点的大小
                },
              },
            },
            {
              name: 'ccc',
              type: 'line',
              stack: 'Total',
              data: [150, 232, 201, 154, 190, 330, 410],
              symbolSize: 12,
              emphasis: {
                itemStyle: {
                  color: 'gray',
                },
              },
              itemStyle: {
                normal: {
                  borderWidth: 12, // 设置拐点的大小
                },
              },
            },
            {
              name: 'ddd',
              type: 'line',
              stack: 'Total',
              data: [320, 332, 301, 334, 390, 330, 320],
              symbolSize: 12,
              emphasis: {
                itemStyle: {
                  color: 'gray',
                },
              },
              itemStyle: {
                normal: {
                  borderWidth: 12, // 设置拐点的大小
                },
              },
            },
            {
              name: 'eee',
              type: 'line',
              stack: 'Total',
              data: [820, 932, 901, 934, 1290, 1330, 1320],

              symbolSize: 12,
              emphasis: {
                itemStyle: {
                  color: 'gray',
                },
              },
              itemStyle: {
                normal: {
                  borderWidth: 12, // 设置拐点的大小
                  fontSize: 12,
                },
              },
            },
          ],
        }
        this.myChart.setOption(this.chartOption)
      },
      setChartOption() {},
      bindChartEvents() {
        this.myChart.on('click', this.handleChartClick)
      },
      handleChartClick(params) {
        // 遍历所有的系列
        for (let i = 0; i < this.chartOption.series.length; i++) {
          // 获取当前系列
          let series = this.chartOption.series[i]
          // 更新数据
          series.data[params.dataIndex] = {
            value: series.data[params.dataIndex].value || series.data[params.dataIndex],
            itemStyle: {
              color: 'gray', // 设置拐点的填充颜色
              borderColor: 'gray', // 设置拐点的边框颜色
              borderWidth: 2, // 设置拐点的边框宽度
            },
          }
        }
        // 使用 setOption 方法来改变每个系列在 '4' 上的点的样式
        this.myChart.setOption(this.chartOption, true)
      },
    },
  }
</script>
<style lang="scss" scoped>
  .more-container {
    ::v-deep {
    }
  }
</style>