vue实现echart图

vue实现echart图

<template>
  <div class="analytics-container">


    <el-row class="form-row" justify="center" align="middle">
      <el-col :span="12">
        <el-form label-width="100px">
          <!-- 第一行：创建时间，选择开始和结束时间 -->
          <el-form-item label="创建时间" class="item">
            <el-row>
              <el-col :span="11">
                <el-date-picker v-model="searchOption.startTime" type="datetime" placeholder="开始时间" style="width: 100%"></el-date-picker>
              </el-col>
              <el-col :span="2" style="text-align: center;">~</el-col>
              <el-col :span="11">
                <el-date-picker v-model="searchOption.endTime" type="datetime" placeholder="结束时间" style="width: 100%"></el-date-picker>
              </el-col>
            </el-row>
          </el-form-item>

          <!-- 第二行：客户端编号 -->
          <el-form-item label="客户端编号" class="item">
            <el-input v-model="searchOption.clientId" placeholder="请输入客户端编号" />
          </el-form-item>

          <!-- Checkbox Group -->
          <el-form-item label="" class="item">
            <el-checkbox-group v-model="checkedList">
              <el-checkbox v-for="(item,index) in checkboxList" v-bind:key="index" :label="item.value">{{ item.label }}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>

          <!-- 提交按钮和关闭按钮 -->
          <el-form-item>
            <el-button type="primary" ref="baseChartBox" @click="onConfirm">确认</el-button>
          </el-form-item>

        </el-form>
      </el-col>
    </el-row>

    <el-row>
      <template v-for="(item, index) in checkboxList">
        <el-col :span="12" v-bind:key="index">
          <div v-show="loadedCharts.includes(item.value)" style="width: 500px; height: 400px;" :ref="'echartRef_' + item.value">{{item.label}}</div>
        </el-col>
      </template>
    </el-row>

  </div>

</template>

<script>

import echarts from 'echarts'

export default {
  name: 'complaintAnalytics',
  data() {
    return {
      index: 0,
      searchOption: {
        startTime: undefined,
        endTime: undefined,
        clientId: undefined
      },
      checkboxList: [
        { label: '抱怨等级柱状图', value: 'a' },
        { label: 'KO抱怨细分柱状图', value: 'b' },
        { label: '管理抱怨细分柱状图', value: 'c' },
        { label: '一般抱怨细分柱状图', value: 'd' },
        { label: '户别投诉饼图', value: 'e' },
      ],
      checkedList: [],   // 选中的列表
      loadedCharts: [],  // 需要加载的Echart图
    }
  },
  methods: {
    onConfirm() {
      this.loadedCharts = this.checkedList.sort();
      this.loadedCharts.forEach((item) => {
        this.initChart(item);
      });
    },

    // 初始化图表
    initChart(item) {
      var echartRef = this.$refs[`echartRef_${item}`][0];
      var chart = echarts.init(echartRef);

      var options = null;
      if (item == "e") {
        options = this.binChartOption(item);
      }
      else {
        options = this.BinAndLineChartOptions(item);
      }
      chart.setOption(options);
    },

    // 获取图表的配置项
    BinAndLineChartOptions(item) {
      var option = {
        title: {
          text: '成绩展示',
          left: 'center',
          textStyle: {
            color: '#333',  // 文本颜色
            fontSize: 16,   // 字号
            fontFamily: 'Arial',  // 字体系列
            fontWeight: 'bold',  // 加粗
          },
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        // 图例配置
        legend: {
          data: ['件数', '占比'],
          left: 'center',
          bottom: 0,    //具体像素值或百分比
        },
        xAxis: [
          {
            type: 'category',
            data: ['重大投诉', 'KO抱怨', '一般抱怨', '管理抱怨', '再发抱怨', '反馈'],
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '件数',
            min: 0,
            max: 25,
            interval: 5,
            axisLabel: {
              formatter: '{value}'
            }
          },
          {
            type: 'value',
            name: '占比',
            min: 0,
            max: 100,
            interval: 20,
            axisLabel: {
              formatter: '{value} %'
            }
          }
        ],
        series: [
          {
            name: '件数',
            type: 'bar',
            tooltip: {
              valueFormatter: function (value) {
                return value;
              }
            }, itemStyle: {
              color: '#00008B', // 设置颜色1
            },
            data: [
              2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
            ]
          },
          {
            name: '占比',
            type: 'line',
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function (value) {
                return value + ' %';
              }
            }, itemStyle: {
              normal: {
                color: '#FFA500',  //圈圈的颜色
                lineStyle: {
                  color: '#FFA500'  //线的颜色
                }
              }
            },
            data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
          }
        ]
      };
      return option;
    },

    binChartOption(item) {
      var option = {
        title: {
          text: '各商品销量占比',
          subtext: 'A商场情况分析',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          top: 'bottom',
          data: ['A商品', 'B商品', 'C商品', 'D商品', 'E商品']
        },
        series: [
          {
            name: '所售商品',
            type: 'pie',
            data: [
              { value: 343, name: 'A商品' },
              { value: 250, name: 'B商品' },
              { value: 509, name: 'C商品' },
              { value: 108, name: 'D商品' },
              { value: 948, name: 'E商品' }
            ],
          }
        ]
      };
      return option;
    },
  }
}
</script>

<style lang="scss" scoped>
</style>

效果如下