图表组件换成echarts

Vuejs/Admin/src/components/widgets/emailsent.vue

@@ -1,6 +1,7 @@
 <script>
 import Loader from "./loader";
 
+import * as echarts from 'echarts'
 /**
  * Email-sent component
  */
@@ -10,45 +11,8 @@ export default {
   },
   data() {
     return {
-      isActive: "year",
-      series: [],
+      isActive: "",
       chartList:[],
-      chartOptions: {
-        chart: {
-          stacked: true,
-          toolbar: {
-            show: false,
-          },
-          zoom: {
-            enabled: true,
-          },
-        },
-        plotOptions: {
-          bar: {
-            horizontal: false,
-            columnWidth: "30%",
-            endingShape: "rounded",
-          },
-        },
-        dataLabels: {
-          enabled: false,
-        },
-        xaxis: {
-          categories: [],
-        },
-        colors: ["#556ee6", "#34c38f", "#f46a6a"],
-        legend: {
-          position: "top",
-        },
-        grid:{
-          xaxis:{
-            bottom:0,
-          }
-        },
-        fill: {
-          opacity: 1,
-        },
-      },
       pageload:false,
     };
   },
@@ -67,47 +31,80 @@ export default {
     this.isActive = this.list[0].title
     this.chartList = this.list[0].list
     console.log('this.chartList:',this.chartList);
-    this.series = [{name:"Pending",data:[]},{name:"Clear",data:[]},{name:"Reject",data:[]}];
-    this.chartOptions.xaxis.categories = []
-    for(let i=0;i<this.chartList.length;i++){
-      console.log('this.chartList[i].title:',this.chartList[i].title);
-      this.chartOptions.xaxis.categories.push(this.chartList[i].title);
-      for(let n=0;n<this.chartList[i].value.length;n++){
-        for(let j=0;j<this.series.length;j++){
-          if(this.chartList[i].value[n].title==this.series[j].name){
-            this.series[j].data.push(this.chartList[i].value[n].value)
-          }
-        }
-      }
-    }
+    this.updateChartOption()
     this.pageload = true
-    console.log('this.series:',this.series);
-    console.log('this.chartOptions:',this.chartOptions);
   },
   methods: {
-    changeVal(idx) {
-      this.isActive = this.list[idx].title;
-      this.chartList = this.list[idx].list
-      this.series = [{name:"Pending",data:[]},{name:"Clear",data:[]},{name:"Reject",data:[]}];
-      // this.chartOptions.xaxis.categories = []
-      let xdata = []
+    updateChartOption(){
+      
+      let _series = [
+        {name:"Pending",type: 'bar',stack: 'Ad',colorBy:"data",itemStyle:{color:'#50a5f1'}, emphasis: {focus: 'series'},data:[]},
+        {name:"Clear",type: 'bar',stack: 'Ad', itemStyle:{color:'#34c38f'},emphasis: {focus: 'series'},data:[]},
+        {name:"Reject",type: 'bar',stack: 'Ad', itemStyle:{color:'#f46a6a'},emphasis: {focus: 'series'},data:[]}];
+      let _xdata = []
       for(let i=0;i<this.chartList.length;i++){
         console.log('this.chartList[i].title:',this.chartList[i].title);
-        // this.chartOptions.xaxis.categories.push(this.chartList[i].title);
-        xdata.push(this.chartList[i].title)
+        _xdata.push(this.chartList[i].title);
         for(let n=0;n<this.chartList[i].value.length;n++){
-          for(let j=0;j<this.series.length;j++){
-            if(this.chartList[i].value[n].title==this.series[j].name){
-              this.series[j].data.push(this.chartList[i].value[n].value)
+          for(let j=0;j<_series.length;j++){
+            if(this.chartList[i].value[n].title==_series[j].name){
+              _series[j].data.push(this.chartList[i].value[n].value)
             }
           }
         }
       }
-      this.$refs.achart.updateOptions({
-        xaxis:{
-          categories:xdata,
-        }
-      })
+      let options = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        legend: {},
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          top:'15%',
+          containLabel: true
+        },
+        xAxis: [
+          {
+            type: 'category',
+            axisLabel: {
+              interval: 0,      // 坐标轴刻度标签的显示间隔
+              rotate: this.isActive=='ConsulateSummary'?30:0        // 标签倾斜的角度
+            },
+            axisTick:{show:false},
+            data: _xdata
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            axisTick:{show:false},
+            splitLine:{
+              lineStyle:{
+                color:'rgba(200,200,200,0.2)'
+              }
+            }
+          }
+        ],
+        series: _series
+      }
+      console.log('this.options:',options);
+      if(!this.myChart){
+        this.myChart = echarts.init(
+          document.getElementById("myChart")
+        );
+      }
+      // 绘制图表
+      this.myChart.setOption(options);
+    },
+    changeVal(idx) {
+      this.isActive = this.list[idx].title;
+      this.chartList = this.list[idx].list
+      this.updateChartOption()
     }
   },
 };
@@ -133,7 +130,7 @@ export default {
           </div>
         </div>
 
-        <apexchart
+        <!-- <apexchart
           v-if="chartOptions.xaxis.categories.length>0"
           class="apex-charts"
           type="bar"
@@ -142,7 +139,8 @@ export default {
           height="160"
           :series="series"
           :options="chartOptions"
-        ></apexchart>
+        ></apexchart> -->
+        <div id="myChart" :style="{ width: '600px', height: '160px' }"></div>
       </div>
     </div>
   </Loader>