Vue.js+ECharts：切换图表类型（图表工具栏）

客官°小女子只卖身不卖艺 2023-06-30 12:58 28阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly93dWRhbi5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly93dWRhbi5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 1][]

<template>
      
      <div style="width: 600px;height:400px;"/>
    </template>
    
    <script>
    import echarts from 'echarts'
    require('echarts/theme/macarons') // echarts theme
    
    export default {
      data() {
        return {
          // 指定图表的配置项和数据
          option: {
            tooltip: {
              trigger: 'axis',
              axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
              }
            },
            legend: {
              data: ['销量', '库存量']
            },
            xAxis: {
              data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
            },
            yAxis: {},
            toolbox: { // 工具箱
              show: true,
              feature: {
                dataZoom: {
                  yAxisIndex: 'none'
                },
                dataView: {readOnly: false},
                magicType: {type: ['bar', 'line']},
                restore: {}
              }
            },
            series: [{
              name: '销量',
              type: 'bar',
              stack: 'vistors',
              barWidth: '60%',
              data: [20, 20, 36, 10, 10, 20],
              markLine: {
                data: [
                  {type: 'average', name: '平均值'}
                ]
              }
            },
            {
              name: '库存量',
              type: 'bar',
              stack: 'vistors',
              barWidth: '60%',
              data: [10, 30, 20, 5, 5, 10],
              markLine: {
                data: [
                  {type: 'average', name: '平均值'}
                ]
              }
            }]
          }
        }
      },
      mounted() {
        this.$nextTick(() => {
          this.initChart()
        })
      },
      methods: {
        initChart() { // 通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图
          this.chart = echarts.init(this.$el, 'macarons')
          // this.chart = echarts.init(this.$el)
    
          // 使用刚指定的配置项和数据显示图表。
          this.chart.setOption(this.option)
        }
      }
    }
    </script>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly93dWRhbi5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2020011717245386.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly93dWRhbi5ibG9nLmNzZG4ubmV0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly93dWRhbi5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200117172524303.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly93dWRhbi5ibG9nLmNzZG4ubmV0,size_16,color_FFFFFF,t_70