echart 柱图渐变色

  1 <template>
  2   <div>
  3     <el-row :gutter="30">
  4       <el-col :span="12">
  5         <el-card>
  6           <div id="typeChart" style="width: 600px;height:400px;"></div>
  7         </el-card>
  8       </el-col>
  9       <el-col :span="12">
 10         <el-card>
 11           <div id="brandChart" style="width: 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>