Echarts面积图1.0（渐变）

代码：

option = {tooltip: {trigger: 'axis',borderWidth: 0,padding: 10,textStyle: {color: '#fff'},backgroundColor: 'rgba(0,0,0,0.65)',confine: true // 超出的部分不会被遮盖},grid: {left: '5%',right: '5%',top: 0,bottom: '28%'},xAxis: {type: 'category',data: ['2021-08-03','2021-08-04','2021-08-05','2021-08-06','2021-08-07','2021-08-08'],axisTick: {lineStyle: {color: '#999'}},axisLabel: {color: '#999',showMinLabel: true,showMaxLabel: true,formatter: function(value, index) {if (value !== '') {value = value.split('-')[0] + '/' + value.split('-')[1] + '/' + value.split('-')[2]}const data = []data.push(index)const count = data[data.length - 1]if (index === 0 && value !== '') {return '             ' + value}if (index === count && value !== '') {return value + '            '}}},axisLine: {lineStyle: {type: 'dashed',color: '#ececec'}},boundaryGap: false},yAxis: {type: 'value',show: false},series: [{data: [12,13,15,18,19,10],type: 'line',lineStyle: {color: '#d0021b'},connectNulls: true,symbol: 'none',areaStyle: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: 'rgba(208,2,27,0.5)'}, {offset: 1,color: 'rgba(208,2,27,0)'}])}}]
};

最终的效果：

Echarts面积图1.0（渐变）相关推荐

echarts:面积图按照数值标记颜色
网友求助,要做如下echarts图,分析一下,这是一个基础面积图,然后超过30就标红,低于10就标黄,中间10-30的markarea区域是浅灰色,难点在于标黄的区域,它在折线上边,如果在折线下边,那 ...
echarts 折线图阴影颜色渐变
series下面的这个areaStyle series: [{data: count,type: "line",smooth: true, areaStyle: {normal: ...
Echarts雷达图1.0
代码: const seriseData = [{name: 'one',value: 30}, {name: 'two',value: 100}, {name: 'three',value: 90} ...
Vue+Echarts数据可视化(面积图)
Vue+Echarts数据可视化(面积图) 最近公司开发需要使用Echarts来进行数据展示,稍微记录一下.先看效果图: 话不多说,直接上代码: 1.使用npm下载安装Echarts依赖(下载速度慢可 ...
MATLAB | 面积图、饼状图、水平柱状图的斜线填充(阴影填充)
没想到叭,阴影柱状图仅仅一天就迎来了(1.5.1)版本,已经支持水平柱状图绘制!!同时本人又连夜赶制了另外两款相关的阴影图绘制函数: 来来来,后文马上介绍一下这三款函数. 另:代码开发基于polysh ...
三、教你搞懂渐变堆叠面积图《手把手教你 ECharts 数据可视化详解》
注:本系列教程需要对应 JavaScript .html.css 基础,否则将会导致阅读时困难,本教程将会从 ECharts 的官方示例出发,详解每一个示例实现,从中学习 ECharts . ECha ...
Echarts案例学习-渐变堆积面积图
本文中使用的Echarts版本为:5.3.0 本系列主要是通过复现Apach Echarts官网上的示例来学习Echarts.目标图像网页地址:https://echarts.apache.org ...
echarts实现中国地图，山西地图，图表面积图配置项
文章目录 1.vue引入echars 2.建立echars基本框架 3.中国地图 4.山西地图为例,展示点击获取城市名称并保存在data中,方便使用 6.图表面积图(大小,线条颜色,面积颜色,百分比显 ...
v-charts 折线图面积图颜色渐变
目录介绍v-charts官网项目总v-charts的使用面积图颜色渐变写法 v-charts官网 1.下载 npm i v-charts -S 2.mian.js import VeLine f ...

Echarts面积图1.0（渐变）

代码：

最终的效果：

Echarts面积图1.0（渐变）相关推荐

最新文章

热门文章