vue使用柱状图每个柱状图颜色不同并渐变

我们在使用柱状图时官网上的样式和我们的需要时的样式有些不符合

官网样式

我们需的样式

方法1：
（借鉴网上方法）

 series: [{barWidth:"40%",itemStyle:{normal:{//右，下，左，上（0，0，0，1）表示从正右开始向左渐变color: function(params){var colorList = [['#FF0048','#091151'],['#28B1FF','#091151'],['#00FCFF','#091151'],['#8F2BFF','#091151'],['#FF0048','#091151'],['#00FCFF','#091151'],];var colorItem = colorList[params.dataIndex];console.log(colorItem)return new echarts.graphic.LinearGradient(0,0.3,0,1,[{offset:0,color: colorItem[0]},{offset:1,color: colorItem[1]}],false);}}},data: [300, 200, 150, 80, 70, 110],type: 'bar',}]

方法2：

series: [{barWidth:"40%",data: [{value:300,itemStyle:{normal:{color: new echarts.graphic.LinearGradient(0, 0.3, 0, 1, [{ offset: 0, color: "#FF0048"},{ offset: 1, color: "#091151"},])}}},  {value:80,itemStyle:{normal:{color: new echarts.graphic.LinearGradient(0, 0.3, 0, 1, [{ offset: 0, color: "#28B1FF"},{ offset: 1, color: "#091151"},])}}}, {value:150,itemStyle:{normal:{color: new echarts.graphic.LinearGradient(0, 0.3, 0, 1, [{ offset: 0, color: "#00FCFF"},{ offset: 1, color: "#091151"}])}}}, {value:200,itemStyle:{normal:{color: new echarts.graphic.LinearGradient(0, 0.3, 0, 1, [{ offset: 0, color: "#8F2BFF"},{ offset: 1, color: "#091151"}])}}}, {value:300,itemStyle:{normal:{color: new echarts.graphic.LinearGradient(0, 0.3, 0, 1, [{ offset: 0, color: "#FF0048"},{ offset: 1, color: "#091151"}])}}}, {value:180,itemStyle:{normal:{color: new echarts.graphic.LinearGradient(0, 0.3, 0, 1, [{ offset: 0, color: "#00FCFF"},{ offset: 1, color: "#091151"}])}}}, ],type: 'bar',}]

效果图：

vue使用柱状图每个柱状图颜色不同并渐变相关推荐

v-charts 设置柱状图每个柱子颜色
v-charts 设置柱状图每个柱子颜色(Vue) 页面部分 <ve-histogram :extend="chartExtend" :data="regionDa ...
vue使用Echarts画柱状图
目录 1 引入Echarts 1.1 安装 1.2 引入 2 基本柱状图 3 多列柱状图 4 柱状图样式设置 4.1 柱条样式 4.2 柱条间距 5 动态排序柱状图 6 总结 1 引入Echarts ...
vue组件-echarts地图显示柱状图并给柱状图添加点击事件（支持自定义地图）
vue组件-echarts地图显示柱状图并给柱状图添加点击事件(支持自定义地图) 效果如下所示: 参考文档: 这是参考的文档起因: 最近有朋友有需求需要用echarts,在地图上显示柱状图,并添加点 ...
Vue：echarts的柱状图怎样按照比例缩小？
Vue:echarts的柱状图怎样按照比例缩小? 资源: vue制作echart图表随着画面等比例放大缩小第二种方法:在div中使用echarts,利用div的参数来限制echarts生成的图表的大 ...
Vue：echarts的柱状图为什么X轴上的文字不显示？
Vue:echarts的柱状图为什么X轴上的文字不显示? 资源: echarts x轴文字显示不全(解决方案) echarts柱状图X轴底部文字有的不显示出来?
android 大屏图表 MPAndroidChart 折线图曲线图柱状图圆角柱状图条形图
//图表库implementation 'com.github.PhilJay:MPAndroidChart:v3.1.0' X轴:XAxis Y轴:YAxis 图例:Legend 描述:Descri ...
python plt绘制柱状图形+柱状图增加数字标注
python绘制柱状图形+柱状图增加数字标注 data = pd.Series([4, 5, 6], index=['A','B','C']) fig = plt.figure(figsize=(7, ...
论文图片绘制 Python绘制多分类混淆矩阵及可视化(颜色随正确率渐变)
论文图片绘制 Python绘制duofenlei 混淆矩阵及可视化(颜色随正确率渐变) 需求论文中对多分类评价需要混淆矩阵已获得,需要可视化给出数据混淆矩阵的定义以及如何读图不再描述,这里仅给 ...
matlab bar3 颜色,matlab中怎么控制柱状图标注的颜色?
满意答案 lastdargo 推荐于 2016.01.18 采纳率:45% 等级:10 已帮助:818人一.利用bar3画一个矩阵的柱状图时,如何改变显示的颜色,让它根据数据大小的不同显示不同 ...

vue使用柱状图每个柱状图颜色不同并渐变

vue使用柱状图每个柱状图颜色不同并渐变相关推荐

最新文章

热门文章