1 <template> 2 <div> 3 <el-row :gutter="30"> 4 <el-col :span="12"> 5 <el-card> 6 <div id="typeChart" style=" 600px;height:400px;"></div> 7 </el-card> 8 </el-col> 9 <el-col :span="12"> 10 <el-card> 11 <div id="brandChart" style=" 600px;height:400px;"></div> 12 </el-card> 13 </el-col> 14 </el-row> 15 </div> 16 </template> 17 18 <script> 19 import echarts from "echarts"; 20 21 export default { 22 methods: { 23 typeChart() { 24 // 基于准备好的dom，初始化echarts实例 25 let typeChart = echarts.init(document.getElementById("typeChart")); 26 // 指定图表的配置项和数据 27 let option = { 28 color: ["red"], 29 title: { 30 text: "类型统计" 31 }, 32 tooltip: {}, 33 legend: { 34 data: ["检测车辆"] 35 }, 36 xAxis: { 37 data: ["中原区", "二七区", "金水区", "上街区", "中牟县", "经开区","高新区"] 38 }, 39 yAxis: {}, 40 series: [ 41 { 42 name: "检测车辆", 43 type: "bar", 44 barWidth: 20, 45 data: [50, 100, 200, 300, 400, 500, 600], 46 itemStyle: { 47 normal: { 48 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ 49 { offset: 0, color: "#67B6FF" }, //柱图渐变色 50 { offset: 0.5, color: "#44C0C1" }, //柱图渐变色 51 { offset: 1, color: "#06B5D7" } //柱图渐变色 52 ]) 53 } 54 } 55 } 56 ] 57 }; 58 // 使用刚指定的配置项和数据显示图表。 59 typeChart.setOption(option); 60 }, 61 brandChart() { 62 // 基于准备好的dom，初始化echarts实例 63 let brandChart = echarts.init(document.getElementById("brandChart")); 64 // 指定图表的配置项和数据 65 let option = { 66 color: ["red"], 67 title: { 68 text: "品牌信息" 69 }, 70 tooltip: {}, 71 legend: { 72 data: ["检测车辆"] 73 }, 74 xAxis: { 75 data: ["中原区", "二七区", "金水区", "上街区", "中牟县", "经开区","高新区"] 76 }, 77 yAxis: {}, 78 series: [ 79 { 80 name: "检测车辆", 81 type: "bar", 82 barWidth: 20, 83 data: [50, 140, 200, 300, 400, 500, 400], 84 itemStyle: { 85 normal: { 86 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ 87 { offset: 0, color: "#67B6FF" }, //柱图渐变色 88 { offset: 0.5, color: "#44C0C1" }, //柱图渐变色 89 { offset: 1, color: "#06B5D7" } //柱图渐变色 90 ]) 91 } 92 } 93 } 94 ] 95 }; 96 // 使用刚指定的配置项和数据显示图表。 97 brandChart.setOption(option); 98 } 99 }, 100 mounted() { 101 this.typeChart(); 102 this.brandChart(); 103 } 104 }; 105 </script>