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- ...
随机推荐
- Windows7下驱动开发与调试体系构建——5.实战反调试标记位（NtGlobalFlag）
目录/参考资料:https://www.cnblogs.com/railgunRG/p/14412321.html <加密与解密>P670中,介绍了检查程序是否被调试的第二种方法:查看进程 ...
- Spring Boot：自定义 Whitelabel 错误页面
一.概述在本文中,我们将研究如何禁用和自定义 Spring Boot 应用程序的默认错误页面,因为正确的错误处理描述了专业性和质量工作. 2.禁用白标错误页面 首先,让我们看看如何通过将server. ...
- 系统整理K8S的配置管理实战-建议收藏系列
目录 一.ConfigMap 1.1.创建 1.1.1.from-file 1.1.2.from-env-file 1.1.3.from-literal 1.1.4.基于yaml文件创建 1.2.Po ...
- SpringMVC&Maven进阶
3. SpringMVC 3.1 了解SpringMVC 概述 SpringMVC技术与Servlet技术功能等同,均属于web层开发技术 学习路线 请求与响应 REST分割 SSM整合 拦截器 目标 ...
- ClickHouse(10)ClickHouse合并树MergeTree家族表引擎之ReplacingMergeTree详细解析
目录 建表语法 数据处理策略 资料分享 参考文章 MergeTree拥有主键,但是它的主键却没有唯一键的约束.这意味着即便多行数据的主键相同,它们还是能够被正常写入.在某些使用场合,用户并不希望数据表 ...
- PHY驱动调试之 --- PHY控制器驱动(二)
1. 前言 内核版本:linux 4.9.225,以freescale为例. 2. 概述 PHY芯片为OSI的最底层-物理层(Physical Layer),通过MII/GMII/RMII/SGMII ...
- C温故补缺(十三):可变参数
可变参数 stdarg.h 头文件提供了实现可变参数功能的函数和宏.具体步骤如下: 定义一个函数,最后一个参数为省略号,省略号前面可以设置自定义参数,一般传入参数的个数. int func(int n ...
- 14 STL-常用算法
重新系统学习c++语言,并将学习过程中的知识在这里抄录.总结.沉淀.同时希望对刷到的朋友有所帮助,一起加油哦! 每一次学习都是为了追求智慧! 写在前面,本篇章主要介绍STL中常用算法. 算法主要由 ...
- linux系统编码修改
1. 查看当前系统默认采用的字符集locale 2. 查看系统当前编码echo $LANG如果输出为:en_US.UTF-8 英文zh_CN.UTF-8 中文 3. 查看系统是否安装中 ...
- python3中的常见知识点1
python3中的常见知识点1 简记一些python小知识 字符串输出 docstring(文档字符串) Lambda 函数(匿名函数) python函数之参数调用 参考链接 字符串输出 1.r'原始 ...