【echarts】横向柱状图（条形图）渐变色，手把手教学

通常的柱状图

渐变色非的简单

series: [{type: 'bar',data: this.rank.num,barWidth: '10%',itemStyle: {color: {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0, color: '##00BFFF' // 0% 处的颜色}, {offset: 1, color: '#54FF9F' // 100% 处的颜色}],global: false // 缺省为 false}}}]

横向的图表却不能照搬

因为渐变还是自下而上的就像这样：

在横向的图表中我们希望渐变是从左到右的

这种效果只需要改一下color的配置


```javascript
series: [{type: 'bar',barWidth: 12,data: this.justice.num,itemStyle: {barBorderRadius: [0, 20, 20, 0],color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [ // color在这里{offset: 0,color: '#FFF1AD'},{offset: 1,color: '#FC5090'}])},label: {normal: {show: true,lineHeight: 10,formatter: '{c}',position: 'right',textStyle: {color: '#fff',fontSize: 10}}}}]

【echarts】横向柱状图（条形图）渐变色，手把手教学相关推荐

echarts——横向柱状图
功能描述全屏横向柱状图从小到大排序,每次显示5条,每3秒切换循环显示鼠标移入停止切换,鼠标移出继续切换柱状图组件源码 <template><div class="w ...
echarts设置柱状图柱体渐变色
渐变色使用的是 ==> echarts内置的渐变色生成器 echarts.graphic.LinearGradient 更多相关文档也可以自己所搜看看~ series中配置: series: [ ...
echarts横向柱状图单个柱子设置警戒线，超过警戒线为渐变蓝色，没超过为渐变红色
效果图如下话不多说,直接上代码.  <template><v-chart cl ...
Echarts横向柱状图：叠加、堆叠(stack)以及点击事件
html <div class="box" id="echartModel" style="background-color: #191e3e; ...
ECharts系列 - 柱状图（条形图）实例一
ECharts主页: http://echarts.baidu.com/index.html ECharts-2.1.8下载地址: http://echarts.baidu.com/build/e ...
echarts实现饼图及横向柱状图的绘制
项目中需要绘制饼图,因此简单学习了下echarts的基本使用. head中引入js文件: <script src="/static/frame/echarts/echarts.min. ...
echarts（横向柱状图和grid）
场景最近在做知识图谱的时候,右侧弹窗需要有数据统计功能,大概UI如下图,当时想到的是横向柱状图来实现,目前的效果与UI的不同是后面统计的数量显示的位置.后来经其他前端同事启发,他是用进度条来实现的, ...
echarts横向渐变柱状图，顶部带scatter,effectScatter,背景色
1.echarts横向渐变柱状图,顶部带scatter,effectScatter,背景色 (代码和效果如下) <template> <div class="chart&q ...
【Echarts】中国地图、堆叠图、横向柱状图
封装一个监听窗口变化,自适应图像大小的混入对象: 混入对象:一个混入对象可以包含任意组件选项.当组件使用混入对象时,所有混入对象的选项将被"混合"进入该组件本身的选项. chart ...
vue使用Echarts画柱状图
目录 1 引入Echarts 1.1 安装 1.2 引入 2 基本柱状图 3 多列柱状图 4 柱状图样式设置 4.1 柱条样式 4.2 柱条间距 5 动态排序柱状图 6 总结 1 引入Echarts ...

【echarts】横向柱状图（条形图）渐变色，手把手教学

通常的柱状图

横向的图表却不能照搬

【echarts】横向柱状图（条形图）渐变色，手把手教学相关推荐

最新文章

热门文章