Echarts 折线图Demo调色12种，可以直接使用~~~
测试Demo代码~~
<template>
<div>
<div id="myChart" ref="mapBox" style="width: 100%; height: 400px"></div>
</div>
</template>
<script>
import echarts from 'echarts'
import chartMock from '../co-assets/chart-mock.js'
const myOption = {
title: {
text: '折线图堆叠'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
type: 'value'
},
series: [
{
name: '1',
type: 'line',
stack: '总量',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '2',
type: 'line',
stack: '总量',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: '3',
type: 'line',
stack: '总量',
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: '4',
type: 'line',
stack: '总量',
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: '5',
type: 'line',
stack: '总量',
data: [820, 932, 901, 934, 1290, 1330, 1320]
},
{
name: '6',
type: 'line',
stack: '总量',
data: [920, 1032, 1101, 1134, 1390, 1430, 1420]
},
{
name: '7',
type: 'line',
stack: '总量',
data: [1020, 1132, 1201, 1234, 1490, 1430, 1520]
},
{
name: '8',
type: 'line',
stack: '总量',
data: [1220, 1332, 1301, 1334, 1590, 1530, 1620]
},
{
name: '9',
type: 'line',
stack: '总量',
data: [1320, 1432, 1801, 1834, 1890, 1830, 1820]
},
{
name: '10',
type: 'line',
stack: '总量',
data: [2220, 2232, 3201, 3334, 3490, 3530, 3620]
},
{
name: '11',
type: 'line',
stack: '总量',
data: [2420, 2432, 3401, 3434, 3790, 3730, 3820]
},
{
name: '12',
type: 'line',
stack: '总量',
data: [3220, 3232, 4201, 4334, 4490, 5530, 5620]
}
]
}
export default {
data() {
return {}
},
mounted() {
this.myChart = echarts.init(this.$refs.mapBox)
this.setChartOnion()
window.addEventListener('resize', this.resizeTheChart)
},
methods: {
resizeTheChart() {
// console.log("縮放執行中~~~");
if (this.$refs && this.$refs.mapBox) {
const myChartNode = document.getElementById('myChart')
if (myChartNode) {
myChartNode.style.height = myChartNode.offsetWidth * 0.5 + 'px'
} this.myChart.resize()
}
},
setChartOnion() {
myOption.series.forEach((item, i) => {
item.areaStyle = { color: {} }
item.itemStyle = { color: {} }
// item = {
// name: item.name,
// type: 'line',
// symbol: 'none',
// // symbol:'circle', // 折线点设定为实心点
// // symbolSize: 9, // 设定折线点的大小
// // smooth: true, //折点是圆弧状的
// // showSymbol: true,
// // symbol: "circle", //折点设定为实心点
// // symbolSize: 20,
// stack: item.stack,
// data: item.data,
// itemStyle: { color: {} },
// areaStyle: { color: {} },
// lineStyle: {}
// }
// 設置折線圖顏色
if (chartMock.itemStyleArr[i]) {
item.itemStyle = chartMock.itemStyleArr[i].lineStyle
item.areaStyle.color = chartMock.itemStyleArr[i]['color']
}
})
this.myChart.setOption(myOption)
}
}
}
</script>
export default {
itemStyleArr: [
{
// 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#d7f4f8' // 0% 处的颜色
},
{
offset: 0.5,
color: '#b8eff7' // 100% 处的颜色
},
{
offset: 1,
color: '#fff' // 100% 处的颜色
}
],
global: false // 缺省为 false
}, // 背景渐变色
lineStyle: {
normal: {
color: '#4fd6d2', // 图例的颜色
lineStyle: {
// 系列级个性化折线样式
width: 2,
type: 'solid',
color: '#4fd6d2'
}
}
},
emphasis: {
color: '#4fd6d2',
lineStyle: {
// 系列级个性化折线样式
width: 2,
type: 'dotted',
color: '#4fd6d2' // 折线的颜色
}
}
}, // 线条样式1
{
// 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#81befd' // 0% 处的颜色
},
{
offset: 0.4,
color: '#bad7f5' // 100% 处的颜色
},
{
offset: 1,
color: '#fff' // 100% 处的颜色
}
],
global: false // 缺省为 false
}, // 背景渐变色
lineStyle: {
normal: {
color: '#0180ff', // 图例的颜色
lineStyle: {
// 系列级个性化折线样式
width: 2,
type: 'solid',
color: '#0180ff'
}
}
},
emphasis: {
color: '#0180ff',
lineStyle: {
// 系列级个性化折线样式
width: 2,
type: 'dotted',
color: '0180ff'
}
}
}, // 线条样式2
{
// 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#b581fd' // 0% 处的颜色
},
{
offset: 0.4,
color: '#f9e4ff' // 40% 处的颜色
},
{
offset: 1,
color: '#fff' // 100% 处的颜色
}
],
global: false // 缺省为 false
}, // 背景渐变色
lineStyle: {
normal: {
color: '#b581fd', // 图例的颜色
lineStyle: {
// 系列级个性化折线样式
width: 2,
type: 'solid',
color: '#b581fd'
}
}
},
emphasis: {
color: 'red',
lineStyle: {
// 系列级个性化折线样式
width: 1,
type: 'dotted',
color: 'red'
}
}
}, // 线条样式3
{
// 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#6699FF' // 0% 处的颜色
},
{
offset: 0.4,
color: '#9ebbf5' // 100% 处的颜色
},
{
offset: 1,
color: '#fff' // 100% 处的颜色
}
],
global: false // 缺省为 false
}, // 背景渐变色
lineStyle: {
normal: {
color: '#6699FF', // 图例的颜色
lineStyle: {
// 系列级个性化折线样式
width: 2,
type: 'solid',
color: '#6699FF'
}
}
},
emphasis: {
color: '#6699FF',
lineStyle: {
// 系列级个性化折线样式
width: 1,
type: 'dotted',
color: '#6699FF'
}
}
}, // 线条样式4
{
// 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#FF99FF' // 0% 处的颜色
},
{
offset: 0.4,
color: '#f7d2f7' // 100% 处的颜色
},
{
offset: 1,
color: '#fff' // 100% 处的颜色
}
],
global: false // 缺省为 false
}, // 背景渐变色
lineStyle: {
normal: {
color: '#FF99FF', // 图例的颜色
lineStyle: {
// 系列级个性化折线样式
width: 2,
type: 'solid',
color: '#FF99FF'
}
}
},
emphasis: {
color: '#FF99FF',
lineStyle: {
// 系列级个性化折线样式
width: 1,
type: 'dotted',
color: '#FF99FF'
}
}
}, // 线条样式5
{
// 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#2d2df7' // 0% 处的颜色
},
{
offset: 0.4,
color: '#9898f7' // 100% 处的颜色
},
{
offset: 1,
color: '#fff' // 100% 处的颜色
}
],
global: false // 缺省为 false
}, // 背景渐变色
lineStyle: {
normal: {
color: '#2d2df7', // 图例的颜色
lineStyle: {
// 系列级个性化折线样式
width: 2,
type: 'solid',
color: '#2d2df7'
}
}
},
emphasis: {
color: '#2d2df7',
lineStyle: {
// 系列级个性化折线样式
width: 1,
type: 'dotted',
color: '#2d2df7'
}
}
}, // 线条样式6
{
// 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#7a4ffb' // 0% 处的颜色
},
{
offset: 0.4,
color: '#beacf5' // 100% 处的颜色
},
{
offset: 1,
color: '#fff' // 100% 处的颜色
}
],
global: false // 缺省为 false
}, // 背景渐变色
lineStyle: {
normal: {
color: '#7a4ffb', // 图例的颜色
lineStyle: {
// 系列级个性化折线样式
width: 2,
type: 'solid',
color: '#7a4ffb'
}
}
},
emphasis: {
color: '#7a4ffb',
lineStyle: {
// 系列级个性化折线样式
width: 1,
type: 'dotted',
color: '#7a4ffb'
}
}
}, // 线条样式7
{
// 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#cc3399' // 0% 处的颜色
},
{
offset: 0.4,
color: '#d08cb9' // 100% 处的颜色
},
{
offset: 1,
color: '#fff' // 100% 处的颜色
}
],
global: false // 缺省为 false
}, // 背景渐变色
lineStyle: {
normal: {
color: '#cc3399', // 图例的颜色
lineStyle: {
// 系列级个性化折线样式
width: 2,
type: 'solid',
color: '#cc3399'
}
}
},
emphasis: {
color: '#cc3399',
lineStyle: {
// 系列级个性化折线样式
width: 1,
type: 'dotted',
color: '#cc3399'
}
}
}, // 线条样式8
{
// 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#ce3df3' // 0% 处的颜色
},
{
offset: 0.4,
color: '#df9cf1' // 100% 处的颜色
},
{
offset: 1,
color: '#fff' // 100% 处的颜色
}
],
global: false // 缺省为 false
}, // 背景渐变色
lineStyle: {
normal: {
color: '#ce3df3', // 图例的颜色
lineStyle: {
// 系列级个性化折线样式
width: 2,
type: 'solid',
color: '#ce3df3'
}
}
},
emphasis: {
color: '#ce3df3',
lineStyle: {
// 系列级个性化折线样式
width: 1,
type: 'dotted',
color: '#ce3df3'
}
}
}, // 线条样式9
{
// 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#ff6666' // 0% 处的颜色
},
{
offset: 0.4,
color: '#f3a0a0' // 100% 处的颜色
},
{
offset: 1,
color: '#fff' // 100% 处的颜色
}
],
global: false // 缺省为 false
}, // 背景渐变色
lineStyle: {
normal: {
color: '#ff6666', // 图例的颜色
lineStyle: {
// 系列级个性化折线样式
width: 2,
type: 'solid',
color: '#ff6666'
}
}
},
emphasis: {
color: '#ff6666',
lineStyle: {
// 系列级个性化折线样式
width: 1,
type: 'dotted',
color: '#ff6666'
}
}
}, // 线条样式10
{
// 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#f7aa37' // 0% 处的颜色
},
{
offset: 0.4,
color: '#f1bf75' // 100% 处的颜色
},
{
offset: 1,
color: '#fff' // 100% 处的颜色
}
],
global: false // 缺省为 false
}, // 背景渐变色
lineStyle: {
normal: {
color: '#f7aa37', // 图例的颜色
lineStyle: {
// 系列级个性化折线样式
width: 2,
type: 'solid',
color: '#f7aa37'
}
}
},
emphasis: {
color: '#f7aa37',
lineStyle: {
// 系列级个性化折线样式
width: 1,
type: 'dotted',
color: '#f7aa37'
}
}
}, // 线条样式11
{
// 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#ffcc33' // 0% 处的颜色
},
{
offset: 0.4,
color: '#f5d77e' // 100% 处的颜色
},
{
offset: 1,
color: '#fff' // 100% 处的颜色
}
],
global: false // 缺省为 false
}, // 背景渐变色
lineStyle: {
normal: {
color: '#ffcc33', // 图例的颜色
lineStyle: {
// 系列级个性化折线样式
width: 2,
type: 'solid',
color: '#ffcc33'
}
}
},
emphasis: {
color: '#ffcc33',
lineStyle: {
// 系列级个性化折线样式
width: 1,
type: 'dotted',
color: '#ffcc33'
}
}
}, // 线条样式12
{
// 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#efef33' // 0% 处的颜色
},
{
offset: 0.4,
color: '#fbfb87' // 100% 处的颜色
},
{
offset: 1,
color: '#fff' // 100% 处的颜色
}
],
global: false // 缺省为 false
}, // 背景渐变色
lineStyle: {
normal: {
color: '#efef33', // 图例的颜色
lineStyle: {
// 系列级个性化折线样式
width: 2,
type: 'solid',
color: '#efef33'
}
}
},
emphasis: {
color: '#efef33',
lineStyle: {
// 系列级个性化折线样式
width: 1,
type: 'dotted',
color: '#efef33'
}
}
} // 线条样式11
]
};
Echarts 折线图Demo调色12种，可以直接使用~~~的更多相关文章
- echarts折线图Demo
echarts链接:http://echarts.baidu.com/examples/editor.html?c=line-stack 黑底代码:http://gallery.echartsjs.c ...
- d3.js 教程 模仿echarts折线图
今天我们来仿echarts折线图,这个图在echarts是折线图堆叠,但是我用d3改造成了普通的折线图,只为了大家学习(其实在简单的写一个布局就可以).废话不多说商行代码. 1 制作 Line 类 c ...
- 实现Echarts折线图的虚实转换
需求:医院的体温单,在统计体温时,对于正常情况下统计的体温数据,需要显示实线:对于进行物理降温后统计的体温数据,需要显示虚线. 现有的体温单是运用 Echarts 折线图,统一用实线显示.因此在这基础 ...
- echarts折线图动态改变数据时的一个bug
echarts折线图中当增加dataZoom,修改start大于0的时候,会出现折线混乱,变成竖直的线,绘制有问题. 解决方法,在dataZoom中增加filterMode: 'empty' http ...
- ECharts折线图堆叠设置为不堆叠的方法
下图是ECharts折线图堆叠的官方源码,设置折线图不堆叠只需要将每一个stack的值设置为不一样的名称或者将stack属性删除即可. option = { title: { text: '折线图堆叠 ...
- echarts折线图，数据切换时（最近七天）绘图不合理现象
echarts折线图,当进行数据切换时存在绘制不合理的问题,数据没错,但绘制不对. 两个0之间的连线应该是平滑直线,如图: 正确的显示: 解决: 在myCharts.setOption(option) ...
- vue使用axios读取本地json文件来显示echarts折线图
编辑器:HBuilderx axios文档:http://www.axios-js.com/zh-cn/docs/ echarts实例:https://echarts.apache.org/examp ...
- Echarts 折线图y轴标签值太长时显示不全的解决办法
问题 分析 解决办法 问题 先看一下正常的情况 再看一下显示不全的情况 所有的数据都是从后台取的,也就是说动态变化的,一开始的时候数据量不大不会出现问题,后面y轴的值越来越大的时候就出现了这个显示不全 ...
- 知识点4: 配置echarts折线图和饼图
折线图 效果图 html <template> <div id="v11-charts3"></div> </template> j ...
- echarts折线图相关
optionJKDLine = { title: { text: '告警数量趋势图', textStyle:{ //标题样式 fontStyle:'normal', fontFamily:'sans- ...
随机推荐
- Java多线程-ThreadPool线程池（三）
开完一趟车完整的过程是启动.行驶和停车,但老司机都知道,真正费油的不是行驶,而是长时间的怠速.频繁地踩刹车等动作.因为在速度切换的过程中,发送机要多做一些工作,当然就要多费一些油. 而一个Java线程 ...
- Vue报错：component has been registered but not used
原因: eslint代码检查到你注册了组件但没有使用,然后就报错了.比如代码: 比如Vue中注册了File组件,而实际上却没有使用到(直接取消注册为好): ... impor ...
- STF的DOCKER搭建
OPENSTF OpenSTF(Smartphone Test Farm)是一个web端移动设备管理平台,可以从浏览器端远程调试.远程管理设备.其实有点类似于我们现在很火热的云测平台,如:testin ...
- Day3：学习Java的第一步：Hello World!
HelloWorld 新建一个文件夹存放代码 新建一个JAVA文件 文件后缀名为.java Hello.java 打开文件扩展名,即可查看到文件类型 运行文件:右键Hello.java文件用notep ...
- springboot前端向后端请求返回html语句
后端接口代码 @PostMapping("/service/confirmPay") @ResponseBody public GlobalResponse confirmPay( ...
- Docker | 专栏文章整理🎉🎉
Docker Docker系列文章基本已经更新完毕,这是我从去年的学习笔记中整理出来的. 笔记稍微有点杂乱.随意,把它们整理成文章花费了不少力气.整理的过程也是我的一个再次学习的过程,同时也是为了方便 ...
- perl中ENV的使用
在打印环境变量的时候可以用到.实际上是%ENV,perl中的哈希变量,里面保存的是环境变量.键是环境变量名,值是环境变量值.例如,有一个环境变量是PATH,其值为C:\windows,那么,打印这个环 ...
- PHP 代码解一元二次方程
1 function php_getSolutionOVQE($a,$b,$c=0){ 2 $x1=0; 3 $x2=0; 4 $detal=0; 5 if($a==0 && $b== ...
- mindxdl--common--type.go
// Copyright (c) 2021. Huawei Technologies Co., Ltd. All rights reserved.// Package common this file ...
- 论文解读（CDCL）《Cross-domain Contrastive Learning for Unsupervised Domain Adaptation》
论文信息 论文标题:Cross-domain Contrastive Learning for Unsupervised Domain Adaptation论文作者:Rui Wang, Zuxuan ...