统计分析批量echarts

src/views/message/MessageAnalyse.vue

@@ -115,19 +115,23 @@ a {
             <el-table-column prop="count" label="次数"> </el-table-column>
             <el-table-column prop="sale" label="比例"> </el-table-column>
           </el-table>
-          <el-button v-show='!item.echartShow' type='primary' style='height:40px;margin-left:10px;' @click='item.echartShow = true'>查看图表</el-button>
+          <!-- <el-button v-show='!item.echartShow' type='primary' style='height:40px;margin-left:10px;' @click='item.echartShow = true'>查看图表</el-button>
           <div v-show='item.echartShow'>查看柱状图
             <div :ref='index' style="width:100%;height:250px;"></div>
-          </div>
+          </div> -->
           <!-- <div>查看饼图</div> -->
+          <div :id="`chart${index}`" style="width:300px;height:200px;"></div>
+
         </div>
       </div>
       
     </div>
+
   </section>
 </template>
 <script>
 import Page from "../../components/Page";
+import echarts from 'echarts';
 export default {
   components: {
     Page,
@@ -157,14 +161,111 @@ export default {
       }
     }
   },
-  computed() {},
+  
   methods: {
-    getEcharts(){
-      var myChart = this.$echarts.init(this.$refs.subject);
+    getEcharts(item,index){
+      var myChart = this.$echarts.init(document.getElementById(`chart${index}`));
+      let option1 = {
+                    color: ['#5066FF'],
+                    tooltip: {
+                        trigger: 'axis',
+                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
+                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
+                        }
+                    },
+                    grid: {
+                        left: '3%',
+                        right: '4%',
+                        bottom: '3%',
+                        top:'10%',
+                        containLabel: true
+                    },
+                    xAxis: [
+                        {
+                            type: 'category',
+                            data: ['Mon', 'Tue', 'Wed', 'Thu'],
+                            
+                            axisTick: {
+                                alignWithLabel: true
+                            },
+                            axisLine: {
+                                lineStyle: {
+                                    color: '#D4D8EE',
+                                    width: 2 ,
+                                    type:'dotted',
+                                }
+                            },
+                            axisLabel:{
+                                formatter:function(val) {
+                                    console.log(val,"")
+                                    return '中国科' //对每个标签处理后的结果（通过js字符串方法处理）
+                                },
+                                // x轴字体颜色
+                                textStyle: {
+                                    color: '#999999',
+                                    // lineHeight: 20,
+                                    fontSize: 12
+                                },
+                                align:'center',
+                                // padding:[10,0 ,0,-40],
+                            }
+                            
+                        }
+                    ],
+                    yAxis: [
+                        {
+                            type: 'value',
+                            boundaryGap: ['0%', '20%'],
+                            axisTick: {
+                                show: false
+                            },
+                            axisLine: {
+                                show: false,
+                            },
+                            axisLabel: {
+                                show: true,
+                                textStyle: {
+                                color: '#666666',  //更改坐标轴文字颜色
+                                fontSize : 14      //更改坐标轴文字大小
+                                }
+                            },
+                            splitLine: {
+                                show: true,
+                                lineStyle:{
+                                    type:'dashed'
+                                }
+                            }
+                            // data:['0' , '100' , '200' , '300,400]
+                        }
+                    ],
+                    series: [
+                        {
+                            name: '直接访问',
+                            type: 'bar',
+                            barWidth: '40%',
+                            data: [10, 52, 200, 334],
+                            itemStyle: {
+                                //柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
+                                normal: {
+                                    //柱形图圆角，初始化效果
+                                    barBorderRadius:[10, 10, 10, 10]
+                                }
+                            },
+                        }
+                    ]
+                };
+      myChart.setOption(option1)
     },
   },
+  mounted(){
+    this.results.forEach((item,index)=>{
+      this.$nextTick(function(){
+        this.getEcharts(item,index);
+      })
+    })
+  },
   created() {
-    this.getData();
+    
   },
 };
 </script>