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- ...
随机推荐
- vue 祖先组件操作后代组件方法
前言:最近写代码遇到一问题:祖先级别的组件怎么操作孙子的儿子的组件方法(是不是已经绕晕了),在网上搜了半天都是父子传参,父子操作,晕晕乎乎的想起了bus(事件总线), 原理就是:是在vue原型上挂载( ...
- MyBatis笔记03------XXXMapper.xml文件解析
SQL映射文件的配置解析 当我们写好mapper(dao)层接口时,然后在对应的XXXMapper.xml文件中写业务逻辑对应的SQL映射语句,通过这个文件中可以实现CRU操作,那么下面说明如何编写这 ...
- 【Virt.Contest】CF1155(div.2)
CF 传送门 T1:Reverse a Substring 只有本身单调不减的字符串不能转换为字典序更小的字符串.否则肯定会出现 \(s_i>s_{i+1}\) 的情况. 所以只要从头到尾扫一遍 ...
- Ajax基础(中)
这节主要在上节的基础上学会如何使用Ajax 源码下载: 链接:https://pan.baidu.com/s/1kG-vACFxneAZqONdo97XrQ 提取码:k21y 在WebStorm中打开 ...
- ubuntu 22.04安装多个gcc
sudo apt install gcc-9 g++-9 sudo update-alternatives --install /usr/bin/gcc gcc /usr/bin/gcc-9 90 - ...
- 解决win7连接蓝牙耳机播放设备找不到的问题
前言 这个问题其实就是蓝牙驱动问题, 而用第三方软件安装驱动,如驱动精灵安装蓝牙驱动,可能会不出现缺失驱动问题,但是一些功能会受到限制(win7系统与其蓝牙驱动不兼容). 解决办法 去 Inter官网 ...
- 关于解决linux python3安装gattlib报错
1. 报错信息 /usr/bin/ld: cannot find -lboost_python36 collect2: error: ld returned 1 exit status error: ...
- question（The hierarchy of the type MyServlet is inconsistent）——解决tomcat重新添加依赖
在保存代码时突然出现类似于tomcat不能正常使用的警告弹窗,在eclipse中删除tomcat依赖之后,按照以下步骤先在eclipse添加依赖 1.eclipse项目中添加tomcat依赖 wind ...
- 批量将多个相同Excel表格内容合并到一个Excel表格的sheet工作簿当中。
Sub Books2Sheets()Dim fd As FileDialog Set fd = Application.FileDialog(msoFileDialogFilePicker) Dim ...
- phpMyAdmin给非技术人员一个查阅数据库的窗口
背景 管理数据库的界面工具. 开发团队中一般有非技术背景人员,比如: 产品,功能测试人员: 对他们来说,可能安装数据库管理工具客户端都很麻烦,需要一款在线的网页工具能方便他们查阅数据. 本地docke ...