vue中使用echarts
npm install echarts import echarts from 'echarts'; Vue.prototype.$echarts = echarts; //使用 this.echarts = this.$echarts.init(document.querySelector('#echarts'));
1.设置柱条颜色为渐变色
series: [ { name:'正常通行', type:'bar', stack: 'one', barWidth: '14px', itemStyle: { normal: { //颜色渐变 color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#0CF7FC' }, { offset: 1, color: '#0568D0' }]) } }, emphasis: this.emphasisStyle, data:[6000, 2000, 1000, 6000, 7000, 1000, 6000] } ]
2.设置折线图的折线颜色为渐变色,拐点颜色,和样式
series:[ { name:'实收', type:'line', smooth: true, // 让曲线变平滑的 color:['#FE4D4B'], // 拐点颜色 symbol: 'circle', // 拐点样式 symbolSize: 5, // 拐点大小 itemStyle: { // 设置折线渐变色 color: '#5CC4E9', normal: { lineStyle: { 2, // 折线宽度 color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [ {offset: 0, color: '#FE4D4B'}, {offset: 1, color: '#E6973C'} ]), } } }, data:[10, 29, 78, 45, 67, 78, 45] }, ]
参考原文