1、HTML
<div class="line1" id="bar" ref="bar_wrap"></div>
2、style
.line1{ width: 100%; height: 90%; min-width: 507px; min-height: 344px;}
3、script
import echarts from 'echarts'
import 'echarts/lib/chart/bar'
4、mounted
let myBar = this.$echarts.init(this.$refs.bar_wrap)
myBar.setOption({ color: ['#00daee'], tooltip: { trigger: 'axis', axisPointer: { // 坐标轴指示器，坐标轴触发有效 type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' } }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: [ { type: 'category', data: ['9.1', '9.2', '9.3', '9.4', '9.5', '9.6', '9.7', '9.8', '9.9', '9.10'], axisTick: { alignWithLabel: true }, axisLine: { lineStyle: { color: '#00daee', width: 1 }, textStyle: { color: '#ffffff', fontSize: 25 } } } ], yAxis: [ { type: 'value', axisLine: { lineStyle: { color: '#00daee', width: 1 }, textStyle: { color: '#00daee' // fontSize: 25 } }, splitLine: { show: false } } ], series: [ { // For shadow type: 'bar', itemStyle: { normal: { color: 'rgba(0,0,0,0.05)' } }, barGap: '-100%', barCategoryGap: '40%', animation: false }, { name: '直接访问', type: 'bar', barWidth: '60%', itemStyle: { normal: { // 每个柱子的颜色即为colorList数组里的每一项,如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组 color: function (params) { let index = params.dataIndex let colorList = [ // 渐变颜色的色值和透明度 // 透明度从0 ['rgba(52,167,254,0)', 'rgba(52,167,254,0)', 'rgba(52,167,254,0)', 'rgba(52,167,254,0)', 'rgba(52,167,254,0)', 'rgba(52,167,254,0)', 'rgba(52,167,254,0)', 'rgba(52,167,254,0)', 'rgba(52,167,254,0)', 'rgba(52,167,254,0)'], // 到透明度1 ,如果需要不同的颜色直接修改不同颜色即可 ['#34a7fe', '#34a7fe', '#34a7fe', '#34a7fe', '#34a7fe', '#34a7fe', '#34a7fe', '#34a7fe', '#34a7fe', '#34a7fe'] ] return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, // 颜色的开始位置 color: colorList[1][index] // 0% 处的颜色 }, { offset: 1, // 颜色的结束位置 color: colorList[0][index] // 100% 处的颜色 }]) } } }, data: [10, 52, 200, 334, 390, 330, 220, 100, 20, 40] } ]})