echart 柱状图倒叙、字体设置、颜色渐变的使用

倒叙 inside: true,

  var option = {color: ['#CFF0FD'],tooltip: {show: true},yAxis: {inverse:true,axisTick: {show: false},axisLine: {show: false,},axisLabel: {inside: true,verticalAlign: 'bottom',lineHeight: 40,color: '#DDDFEB',formatter: function (value, index) {   // 设置y轴文字的颜色if (index > 9) {return '{first|' (index+1)+ value + '}'} else {return    `{other| 0${(index+1)}}`+`{other1| ${value}}`// return `{other| ${'0'+(index+1) + ' '+value}` }},

字体设置 rich

 axisLabel: {inside: true,verticalAlign: 'bottom',lineHeight: 40,color: '#DDDFEB',formatter: function (value, index) {   // 设置y轴文字的颜色if (index > 9) {return '{first|' (index+1)+ value + '}'} else {return `{other| 0${(index+1)}}`+`{other1| ${value}}`// return `{other| ${'0'+(index+1) + ' '+value}` }},rich: {other: {color: '#FF881E',opacity: 0.57,fontWeight:700,fontSize:24},other1:{},first: {color: '#CFF0FD'}}},

颜色渐变

 series: [{name: '溯源扫码位置排行',barWidth: 10,type: 'bar',data: this.xValue,itemStyle: {normal: {borderRadius: [3, 20, 20, 3],color: function (params) {   // 设置柱形图的颜色console.log(params)if (params.dataIndex === 0) {return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{offset: 0,color: "rgba(196,196,196,0.1)",},{offset: 1,color: "rgba(196,196,196,0.9)",},])} else if (params.dataIndex === 1) {return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{offset: 0,color: "rgba(255,136,30,0)",},{offset: 1,color: "rgba(255,136,30,0.9)",},])} else if (params.dataIndex === 2) {return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{offset: 0,color: "rgba(198, 169, 108,0)",},{offset: 1,color: "rgba(198, 169, 108,0.9)",},])} else {return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{offset: 0,color: "rgba(10, 165, 138, 0)",},{offset: 1,color: "rgba(10, 165, 138, 0.9)",},])}}},

echart 柱状图倒叙、字体设置、颜色渐变的使用相关推荐

typora字体设置颜色的解决方案
typora没有直接设置字体颜色的功能,不能像word一样,选中字体直接设置想要的颜色. 下面第一种方法需安装软件AutoHotKey,操作还算简单:后两种方法都是偏技术的,对于非技术的小白可能有点困 ...
java页面字体设置颜色_java 设置字体颜色字体窗体设置图片背景
packageqq;importjavax.swing.*;importjava.awt.*;importjava.awt.event.WindowEvent;publicclassQ1{JWindo ...
使用canvas画同心圆，并且设置颜色渐变
使用canvas进行画圆,并且设置圆环颜色渐变:中间的实心圆渐变.在使用的过程中,其实是发现createLinearGradient(x0,y0,x1,y1)方法时,根据改变x0,y0,x1,y1可以 ...
java给一整行字体设置颜色_怎样设置字体颜色？java swing
怎样设置字体颜色?java swing 关注:251 答案:3 mip版解决时间 2021-02-07 09:26 提问者关系已逝 2021-02-06 22:37 ""+r ...
css 炫酷鎏金字体，颜色渐变
.top>div p{overflow: hidden; //超出部分隐藏font-size: 1.2rem; //大小font-style: oblique; //倾斜text-align: ...
Unity设置字体颜色渐变
unity开发程序在一些必要的的程序的时候需要实现一些简单的渐变效果,之前不太懂都是直接让美术那边出图片用图片来代替,用着用着就让工程中多了很多没有必要的图片.后面找到了一种很好优化包的方法就是直接用 ...
echarts柱状图颜色渐变样式
option: {title: {text: ''},color: [{type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{ offset: 0, c ...
html前端小技巧—字体及颜色色值准确设置
今天分享下"html前端小技巧-字体及颜色色值准确设置"这篇文章,文中根据实例编码详细介绍,或许对大家的编程之路有着一定的参考空间与使用价值,需要的朋友接下来跟着云南仟龙Mark一 ...
CSDN写漂亮博客的技巧--改字体大小颜色、插入多列表格、字体高亮等
文章目录自动生成文章目录改字体大小颜色 == == 用于给文字加高亮改文字背景色插入多列表格设定表格内容居中格式改标题级别字体标粉红加灰色背景生成白色底块插入图片格式调整图片居中 ...

echart 柱状图倒叙、字体设置、颜色渐变的使用

echart 柱状图倒叙、字体设置、颜色渐变的使用相关推荐

最新文章

热门文章