vue项目中 echarts的渐变色的设置

实现效果

2 设置渐变色

  areaStyle: {normal: {color: new t.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: 'rgba(63,227,236,0.8)'}, {offset: .4,color: 'rgba(63,227,236,0.3)'}, {offset: 1,color: 'rgba(63,227,236,0.00)'}])}

3 在echarts --> series --> areaStyle --> normal --> color设置

  series: [{name: '审方数',type: 'line',smooth: true,symbolSize: 1,          // 拐点图形大小areaStyle: {normal: {color: new t.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: 'rgba(63,227,236,0.8)'}, {offset: .4,color: 'rgba(63,227,236,0.3)'}, {offset: 1,color: 'rgba(63,227,236,0.00)'}])// ['rgba(63,227,236,0.3)'],}},itemStyle: {color: ['#3FE3EC'],},data: [10, 20, 15, 20, 15, 20, 15, 20, 15, 20, 15, 20],icon:'image://http://file.dyzhkj.cn/null/1562315548784PyZcsO处方数.png'},]

4 完整代码

 ButtomDrawLine() {let t = this;let myChart = this.$echarts.init(document.getElementById('ButtomDrawLine'))myChart.setOption({title: {},tooltip: {trigger: 'axis',axisPointer: {type: 'cross',label: {backgroundColor: '#6a7985'}}},legend: {left: 'right',textStyle: {//图例文字的样式color: '#ffffff',fontSize: 14},show: true,data: [{name: '审方数',},{name: '处方数',},{name: '会员数'},{name: '含麻登记',}]},/*toolbox: {feature: {dataView: {readOnly: false},restore: {},saveAsImage: {}},iconStyle:{normal:{color:'white',//设置颜色}}},*/xAxis: [{type: 'category',axisLine: { // x轴的颜色和宽度lineStyle: {color: '#3594FF',}},axisLabel: {show: true,textStyle: {color: '#fff'},},data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"]}],yAxis: [{type: 'value',axisLabel: {show: true,textStyle: {color: '#fff'},},axisLine: {lineStyle: {color: '#3594FF',}},// 控制网格线是否显示splitLine: {show: false},min: 0,splitNumber: 5,boundaryGap: [0.2, 0.2],data:[0,50,100,150],}],grid: {top: '25%',left: '0',right: '0',bottom: '0',containLabel: true},series: [{name: '审方数',type: 'line',smooth: true,symbolSize: 1,          // 拐点图形大小areaStyle: {normal: {color: new t.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: 'rgba(63,227,236,0.8)'}, {offset: .4,color: 'rgba(63,227,236,0.3)'}, {offset: 1,color: 'rgba(63,227,236,0.00)'}])// ['rgba(63,227,236,0.3)'],}},itemStyle: {color: ['#3FE3EC'],},data: [10, 20, 15, 20, 15, 20, 15, 20, 15, 20, 15, 20],icon:'image://http://file.dyzhkj.cn/null/1562315548784PyZcsO处方数.png'},{name: '处方数',type: 'line',smooth: true,symbolSize: 1,          // 拐点图形大小areaStyle: {color: new t.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: 'rgba(82,206,86,0.8)'}, {offset: .4,color: 'rgba(82,206,86,0.3)'}, {offset: 1,color: 'rgba(82,206,86,0.00)'}])// ['rgba(82,206,86,0.3)'],},itemStyle: {normal: {color: ['#52CE56'],}},data: [10, 5, 15, 5, 15, 20, 15, 20, 15, 5, 15, 10]},{name: '会员数',type: 'line',smooth: true,symbolSize: 1,          // 拐点图形大小areaStyle: {color: new t.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: 'rgba(251,98,100,0.8)'}, {offset: .4,color: 'rgba(251,98,100,0.3)'}, {offset: 1,color: 'rgba(251,98,100,0.00)'}])// ['rgba(251,98,100,0.3)'],},itemStyle: {normal: {color: ['#FB6264'],}},data: [35, 45, 65, 25, 65, 44, 15, 40, 35, 46, 50, 25]},{name: '含麻登记',type: 'bar',itemStyle: {normal: {color: new t.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: 'rgba(231,233,65,0.8)'}, {offset: .4,color: 'rgba(231,233,65,0.3)'}, {offset: 1,color: 'rgba(231,233,65,0.00)'}]),// ['rgba(231,233,65,0.5)'],barBorderColor: '#E7E941',            // 柱条边线barBorderRadius: 0,                // 柱条边线圆角，单位px，默认为0barBorderWidth: 1,                     // 柱条边线线宽，单位px，默认为1}},barWidth: 15,//柱图宽度data: [5, 7, 3, 7, 5, 4, 5, 6, 4, 7, 5, 8]}]})},

Tips：【小程序云开发】中高级前端面试题库（源码：小程序中联系我哟）。
---------- 创作不易，感谢大家，请多多支持！

vue项目中 echarts的渐变色的设置相关推荐

Vue项目中Echarts流向图迁徙图实现
在数据可视化中,地图可视化是高频应用的一种.我们在一些新闻报道和商业杂志上,会经常看到运用地图来分析展示商业现象,这样的利用地图来反映和分析数据的形式叫数据地图.数据地图可以最直观的表达出数据之间的空 ...
echarts迁徙图 vue_【可视化插件】Vue项目中Echarts流向图迁徙图实现
public render() { //图表绘制方法 this.chart.clear(); const isMock = !this.items.length; const items = isMo ...
vue项目中使用echarts完成图表类的开发之饼图，环形图
最近在vue项目中使用echarts.js完成诸如饼图,环形图,折线图,折线图加柱状图,和柱状图(水平柱状图和垂直柱状图),以及柱状图堆叠,下面请看图片展示: 如上图所示基本上echarts的简单图表 ...
vue项目中使用echarts实现词云
0.先上效果图 1.安装插件 -- vue项目中 npm install echartsnpm install echarts-wordcloud 2.vue页面中引入组件 <word-clou ...
echarts怎么实现立体柱状图_在vue项目中使用echarts制作3d柱状图
在上一篇文章我们讲到构建项目,这篇文章,我们就来讲解一下,在vue项目中使用echarts制作3d柱状图. 还请看我娓娓写来. 1.第一步当然还是进入你所在项目的文件夹. 2.第二步使用npm安装你所 ...
在Vue项目中使用echarts完成迁徙图（Map组件）
在Vue项目中使用echarts完成迁徙图此章个人理解:参考原有的代码基础上,完成了一个地图迁徙的组件先了解一下整体代码, 有能力的可以参照整体完成, 下面也会列出详细步骤解答代码我放在了gith ...
Vue项目中如何设置动态的TDK
TDK是什么 TDK就是网站的标题(title).描述(description)和关键词(keyword) TDK在哪里上面大佬对TDK的概念解释的很全面,但是在网页中的TDK在哪里呢,作为开发人员 ...
在vue项目中使用echarts 阿星小栈
在后台管理系统中,图表是一个很普遍的元素.目前常用的图标插件有 charts, Echarts, highcharts.这次将介绍 Echarts 在 Vue 项目中的应用. 安装echarts依赖 ...
vue项目中如何设置ico图标
在vue项目开发中往往会设计到浏览器头部图标的设置,这里分享一下自己在项目中的使用的方法,如有不足的地方还望指正,直奔主题: 1.首先如何制作ico图标,本人使用的是比特虫在线制作ico图标,使用方法 ...

vue项目中 echarts的渐变色的设置

vue项目中 echarts的渐变色的设置相关推荐

最新文章

热门文章