//本文代码基于ehcarts4.0开发
//https://cdn.bootcss.com/echarts/4.0.0/echarts.min.js
堆叠区域图
![图片描述]( "图片描述")
option = {
title: {
text: '堆叠区域图'
},
tooltip : {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
legend: {
top:0,
right:0
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
type : 'category',
boundaryGap : false,
data : ['周一','周二','周三','周四','周五','周六','周日'],
}
],
yAxis : [
{
type : 'value',
axisTick: {
show: true
},
}
],
series : [
{
name:'邮件营销',
type:'line',
smooth:true,
symbolSize:2,
showSymbol:false,
symbol: 'emptyCircle',
stack: '总量',
lineStyle:{
color:'#9CDD47'
},
itemStyle:{
color:'#9CDD47',
borderWidth:2
},
areaStyle: {
color:{
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'rgba(156, 221, 71,0.2)' // 0% 处的颜色
}, {
offset: 1, color:'rgba(156, 221, 71, 0)'// 100% 处的颜色
}],
}
},
data:[120, 132, 101, 134, 90, 230, 210]
},
{
name:'联盟广告',
type:'line',
stack: '总量',
smooth:true,
symbolSize:2,
showSymbol:false,
symbol: 'emptyCircle',
lineStyle:{
color:'#07FFFF'
},
itemStyle:{
color:'#07FFFF',
borderWidth:2
},
areaStyle: {
color:{
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'rgba(7, 255, 255, 0.2)' // 0% 处的颜色
}, {
offset: 1, color:'rgba(7, 255, 255, 0)'// 100% 处的颜色
}],
}
},
data:[220, 182, 191, 234, 290, 330, 310]
}
]
};
利用富文本样式定制ｘ轴文字
![图片描述]( "图片描述")
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
color:["#4680FF","#4ECB73"],
xAxis: {
type: 'category',
axisLine:{
lineStyle:{
color:"#DBDBDB"
}
},
data: ['低风险', '一般风险', '高风险', '极高风险'],
axisLabel:{
formatter:function(parmas){
console.log(parmas)
var res = '';
switch (parmas) {
case '低风险':
res = '{a|低风险}'
break;
case '一般风险':
res = '{b|一般风险}'
break;
case '高风险':
res = '{c|高风险}'
break;
case '极高风险':
res = '{d|极高风险}'
break;
default:
// code
}
return res
},
rich: {
a: {
color: 'white',
width:70,
padding:5,
borderRadius:5,
backgroundColor:'blue'
},
b: {
color: 'black',
width:70,
padding:5,
borderRadius:5,
backgroundColor:'yellow'
},
c: {
color: 'white',
width:70,
padding:5,
borderRadius:5,
backgroundColor:'orange'
},
d: {
color: 'white',
width:70,
padding:5,
borderRadius:5,
backgroundColor:'red'
},
}
}
},
yAxis: {
type: 'value',
axisLine:{
show:false
},
axisTick:{
show:false
},
splitLine:{
lineStyle:{
color:"#EBEBEB"
}
}
},
series: [{
name: '1月',
type: 'bar',
barGap:0,
barWidth:20,
label:{
show: true,
position: 'top',
color: '#808080',
},
data: [78, 56, 35, 43,]
},
{
name: '2月',
type: 'bar',
barGap:0,
barWidth:20,
label:{
show: true,
position: 'top',
color: '#808080',
},
data: [23, 34, 78, 76]
}]
};
饼图
![图片描述]( "图片描述")
// 饼图配置项
var option = {
series: [
{
name:'风险预警占比',
type: 'pie',
radius: ['25%', '40%'],
center: ['50%', '50%'],
roseType: false,
data: [
{
value: 40,
name: '红色预警'
}, {
value: 30,
name: '橙色预警'
}, {
value: 10,
name: '黄色预警'
}, {
value: 50,
name: '蓝色预警'
}
],
label: {
fontSize: 12,
color:'#545454',
formatter: function (param) {
return param.name + '(' + Math.round(param.percent) + '%' + ')'
+ '\n' + param.value + '个';
}
},
labelLine: {
smooth: false,
lineStyle: {
width: 2
}
},
itemStyle: {
color:function(params){
switch (params.name) {
case '红色预警':
return '#D70002';
case '橙色预警':
return '#FF9309';
case '黄色预警':
return '#FFFB09';
case '蓝色预警':
return '#035EF7';
default:
break;
}
}
},
}
]
}
堆叠柱状图
![图片描述]( "图片描述")
//堆叠柱状图配置项
var option = {
backgroundColor: '#fff',
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
bottom: '10',
itemGap: 30,
data: ['一级', '二级', '三级', '四级']
},
grid: { //图表的位置
top: 30,
left: 10,
right: 80,
bottom: 60,
containLabel: true
},
dataZoom: [
{
type: 'inside'
}, {
type: 'slider',
start: 0,
bottom: 40,
height: '15px',
fillerColor:'rgba(202,223,255,.8)',
borderColor:'#b6d2fc',
handleStyle:{
color:'#b6d2fc'
},
dataBackground:{
lineStyle:{
color:'#b6d2fc'
},
areaStyle:{
color:'rgba(202,223,255,.8)'
}
}
}
],
yAxis: [
{
type: 'value',
name: '备案个数',
nameTextStyle: {
fontSize: 12,
fontWeight: 'bold',
color: '#454545'
},
splitLine: {
show: false
},
axisLine: {
lineStyle: {
color: '#B3B3B3'
}
},
axisLabel: {
color: '#454545'
}
}
],
xAxis: [
{
type: 'category',
name: '区县名称',
nameTextStyle: {
fontSize: 12,
fontWeight: 'bold',
color: '#454545'
},
axisLine: {
lineStyle: {
color: '#B3B3B3'
}
},
axisLabel: {
color: '#454545'
},
data: ['鼓楼区','玄武区','秦淮区']
}
],
series: [
{
name: '一级',
type: 'bar',
stack: '总量',
barWidth: '10px',
itemStyle:{
color:'#D70002'
},
data: [2,4,6]
},
{
name: '二级',
type: 'bar',
stack: '总量',
barWidth: '10px',
data: [2,4,1]
},
{
name: '三级',
type: 'bar',
stack: '总量',
barWidth: '10px',
itemStyle:{
color:'#FFFB09'
},
data: [1,5,7]
},
{
name: '四级',
type: 'bar',
stack: '总量',
barWidth: '10px',
itemStyle:{
color:'#FF9309'
},
data: [1]
}
]
}
渐变柱状图
![图片描述]( "图片描述")
//配置项
var option = {
backgroundColor: '#fff',
color: [
new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{ offset: 0, color: '#23E9EE' },
{ offset: 1, color: '#0460F7' }
]
)
],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
bottom: '10',
itemGap: 30,
data: ['一级', '二级', '三级', '四级']
},
grid: { //图表的位置
top: 30,
left: 10,
right: 80,
bottom: 60,
containLabel: true
},
dataZoom: [
{
type: 'inside'
}, {
type: 'slider',
start: 0,
bottom: 40,
height: '15px',
fillerColor:'rgba(202,223,255,.8)',
borderColor:'#b6d2fc',
handleStyle:{
color:'#b6d2fc'
},
dataBackground:{
lineStyle:{
color:'#b6d2fc'
},
areaStyle:{
color:'rgba(202,223,255,.8)'
}
}
}
],
yAxis: [
{
type: 'value',
name: '备案个数',
nameTextStyle: {
fontSize: 12,
fontWeight: 'bold',
color: '#454545'
},
splitLine: {
show: false
},
axisLine: {
lineStyle: {
color: '#B3B3B3'
}
},
axisLabel: {
color: '#454545'
}
}
],
xAxis: [
{
type: 'category',
name: '区县名称',
nameTextStyle: {
fontSize: 12,
fontWeight: 'bold',
color: '#454545'
},
axisLine: {
lineStyle: {
color: '#B3B3B3'
}
},
axisLabel: {
color: '#454545'
},
data: ['鼓楼区','玄武区','秦淮区']
}
],
series: [
{
name: '报警',
type: 'bar',
stack: '总量',
barWidth: '10px',
data: [1,2,4]
}
]
};
线图
![图片描述]( "图片描述")
//线图配置项
var option = {
tooltip: {
trigger: 'axis'
},
color: [
new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#23E9EE'},
{offset: 1, color: '#0460F7'}
]
)
],
grid: {
top: 30,
left: 10,
right: 30,
bottom: 50,
containLabel: true
},
dataZoom: [
{
type: 'inside'
}, {
type: 'slider',
start: 0,
bottom: 30,
height: '15px',
fillerColor:'rgba(202,223,255,.8)',
borderColor:'#b6d2fc',
handleStyle:{
color:'#b6d2fc'
},
dataBackground:{
lineStyle:{
color:'#b6d2fc'
},
areaStyle:{
color:'rgba(202,223,255,.8)'
}
}
}
],
yAxis: [
{
type: 'value',
splitLine: {
show: false
},
axisLine: {
lineStyle: {
color: '#B3B3B3'
}
},
axisLabel: {
color: '#454545'
}
}
],
xAxis: {
type: 'category',
boundaryGap:false,
axisLine: {
lineStyle: {
color: '#B3B3B3'
}
},
axisLabel: {
color: '#454545'
},
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
series: [
{
name: '报警个数',
type: 'line',
symbol: 'emptyCircle',
symbolSize: 2,
showSymbol: false,
smooth: true,
areaStyle: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: 'rgba(35,233,238,.4)'},
{offset: 1, color: 'rgba(4,96,247,.4)'}
]
)
},
lineStyle: {
width: 1,
color: '#59cef5'
},
itemStyle: {
borderColor: '#59cef5',
borderWidth: 2
},
data:[2,4,3,2,1,4,2]
}
]
}
雷达图
![图片描述]( "图片描述")
option = {
tooltip: {},
radar: {
tooltip: {
trigger: 'item',
},
radius:'70%',
center: ['50%', '55%'],
indicator: [
{ name: '人', max: 50 },
{ name: '管', max: 50 },
{ name: '物', max: 50 },
{ name: '环', max: 50 },
{ name: '机', max: 200 },
],
shape: 'circle',
splitNumber: 4,
triggerEvent: true,
name: {
textStyle: {
color: '#3EB9F9',
},
},
splitLine: {
lineStyle: {
color: [],
},
},
splitArea: {
show: true,
areaStyle: {
color: [
'rgba(38, 117, 222, 0.2)',
'rgba(38, 117, 222, 0.4)',
'rgba(38, 117, 222, 0.6)',
'rgba(38, 117, 222, 0.8)',
].reverse(),
},
},
axisLine: {
lineStyle: {
color: '#2675DE',
},
},
},
series: [
{
type: 'radar',
tooltip: {
trigger: 'item',
},
data: [
{
name: '',
value: [14, 19, 46, 46, 18],
label: {
normal: {
show: true,
},
},
},
],
lineStyle: {
normal: {
width: 1,
opacity: 1,
},
},
symbol: 'none',
itemStyle: {
normal: {
color: '#07FFFF',
},
},
areaStyle: {
normal: {
opacity: 0.1,
},
},
},
],
};
分段折线图
![图片描述]( "图片描述")
{
tooltip: {
trigger: 'axis',
formatter:function(params){
const p = params[0];
const n = p.name;
const v = p.data;
const s = n + '<br/>风险值：' + v;
return s;
}
},
backgroundColor: '#161627',
grid:{
bottom:90,
},
dataZoom: [
{
type: 'inside',
},
{
type: 'slider',
start: 0,
bottom: 35,
height: '10px',
fillerColor: 'rgba(38, 117, 222, 0.1)',
borderColor: '#2675DE',
handleStyle: {
color: '#2675DE',
},
textStyle:{
color:'#fff'
},
dataBackground: {
lineStyle: {
color: '#2675DE',
},
areaStyle: {
color: 'rgba(38, 117, 222, 0.1)',
},
},
left:80,
right:80,
},
],
xAxis: {
data: ["2019-03-18", "2019-03-19", "2019-03-20", "2019-03-21"],
axisLine:{
lineStyle:{
color:'#86AFE5'
}
},
axisLabel: {
interval: 0,
rotate: 20
}
},
yAxis: {
splitLine: {
show: true,
interval:'0.2',
lineStyle:{
color:'rgba(184, 184, 184, 0.2)'
}
},
axisLine:{
lineStyle:{
color:'#86AFE5'
}
},
interval: 1,
},
visualMap: {
orient:'horizontal',
bottom: 0,
left: 'center',
textStyle:{
color:'#fff'
},
pieces: [
{
label:"一般风险",
gt:0,
lte:0.45,
color:"#035EF7",
},
{
label:"高风险",
gt:0.45,
lte:0.7,
color:"#FFFB09",
},
{
label:"较高风险",
gt:0.7,
lte:0.86,
color:"#FF9309",
},
{
label:"极高风险",
gt:0.86,
lte:1,
color:"#D70002",
}],
outOfRange: {
color: '#999',
},
},
series: {
name: '风险值',
type: 'line',
smooth: true,
symbolSize: 6,
symbol:'circle',
data:[0.2, 0.4, 0.8, 1],
markLine: {
symbol: ['none', 'none'],
data: [
{
yAxis: 0.45,
lineStyle: {
color: '#FFFB09',
type: 'dotted',
},
label: {
position: 'start',
}
},
{
yAxis: 0.7,
lineStyle: {
color: '#FF9309',
type: 'dotted',
},
label: {
position: 'start',
}
},
{
yAxis: 0.86,
lineStyle: {
color: '#FF9309',
type: 'dotted',
},
label: {
position: 'start',
}
}
],
},
},
}
关系图
![图片描述]( "图片描述")
var links = [
{
source: '人',
target: '现实风险',
des: '侯亮平是高育良的得意门生'
}, {
source: '人',
target: '管',
}, {
source: '安全管理',
target: '人',
}, {
source: '赵立春',
target: '赵瑞龙',
}, {
source: '赵立春',
target: '刘新建',
}, {
source: '李达康',
target: '赵立春',
}, {
source: '管',
target: '高小琴',
}, {
source: '陈岩石',
target: '机',
}, {
source: '陆亦可',
target: '机',
}, {
source: '沙瑞金',
target: '陈岩石',
}, {
source: '管',
target: '机',
}, {
source: '管',
target: '现实风险',
}, {
source: '现实风险',
target: '机',
}, {
source: '人',
target: '吴惠芬',
}, {
source: '机',
target: '赵东来',
}, {
source: '高小琴',
target: '高小凤',
symbolSize: '1'
}, {
source: '赵东来',
target: '陆亦可',
//name: "爱慕"
}, {
source: '管',
target: '程度',
//name: "领导"
}, {
source: '人',
target: '高小凤',
//name: "情人"
}, {
source: '赵瑞龙',
target: '管',
symbolSize: '1',
}, {
source: '李达康',
target: '赵东来',
}, {
source: '赵瑞龙',
target: '程度',
//name: "领导"
}, {
source: '沙瑞金',
target: '李达康',
}, {
source: '沙瑞金',
target: '人',
}, {
source: '管',
target: '梁璐',
}, {
source: '吴惠芬',
target: '梁璐',
}, {
source: '李达康',
target: '欧阳菁',
}, {
source: '赵瑞龙',
target: '刘新建',
}, {
source: '赵瑞龙',
target: '高小琴',
symbolSize: '1'
}, {
source: '赵瑞龙',
target: '高小凤',
}, {
source: '吴心怡',
target: '陆亦可',
}, {
source: '吴心怡',
target: '吴惠芬',
//name: "姐妹"
}, {
source: '物',
target: '现实风险',
//name: "发小"
}, {
source: '物',
target: '欧阳菁',
//name: "举报",
}, {
source: '欧阳菁',
target: '刘新建',
//name: "举报",
}, {
source: '刘新建',
target: '赵瑞龙',
//name: "举报",
}, {
source: '李达康',
target: '丁义珍',
//name: "领导"
}, {
source: '高小琴',
target: '丁义珍',
//name: "策划出逃"
}, {
source: '管',
target: '丁义珍',
//name: "勾结"
}, {
source: '赵瑞龙',
target: '丁义珍',
//name: "勾结"
}];
links.forEach(function(v) {
v.name='';
v.lineStyle = {
color: '#ccc'
};
})
option = {
title: { text: '关系图谱' },
tooltip: {
formatter: function (x) {
return x.data.des;
}
},
series: [
{
type: 'graph',
layout: 'force',
symbolSize: 40,
roam: true,
// edgeSymbol: ['circle', 'arrow'],
focusNodeAdjacency: true,
edgeSymbolSize: [4, 10],
edgeLabel: {
normal: {
textStyle: {
fontSize: 20
}
}
},
force: {
repulsion: 2500,
edgeLength: [10, 50]
},
draggable: true,
itemStyle: {
normal: {
borderWidth: 2,
color: '#6696FF',
shadowColor: '#6696FF',
shadowBlur: 10,
borderColor: '#fff'
}
},
lineStyle: {
normal: {
width: 2,
color: '#6696FF'
}
},
edgeLabel: {
normal: {
show: true,
formatter: function (x) {
return x.data.name;
}
}
},
label: {
normal: {
show: true,
textStyle: {
}
}
},
data: [
{
name: '现实风险',
des: '最高检反贪局侦查处处长，汉东省人民检察院副检察长兼反贪局局长。<br/>经过与腐败违法分子的斗争，最终将一批腐败分子送上了审判台，<br/>正义战胜邪恶，自己也迎来了成长。',
symbolSize: 100,
itemStyle: {
normal: {
color: '#6696FF'
}
}
}, {
name: '李达康',
des: '汉东省省委常委，京州市市委书记。是一个正义无私的好官。<br/>但为人过于爱惜自己的羽毛，对待身边的亲人和朋友显得有些无情。',
label: {
position: 'right',
formatter: '{b}'
},
itemStyle: {
normal: {
color: '#6696FF'
}
}
}, {
name: '管',
des: '汉东省公安厅厅长',
symbolSize: 80
}, {
name: '陈岩石',
des: '离休干部、汉东省检察院前常务副检察长。充满正义，平凡而普通的共 产 党人。<br/>对大老虎赵立春，以各种形式执着举报了十二年。<br/>在这场关系党和国家生死存亡的斗争中，老人家以耄耋高龄，<br/>义无反顾地背起了炸 药包，在反腐胜利前夕因病去世。',
itemStyle: {
normal: {
color: '#6696FF'
}
},
label: {
position: 'right',
formatter: '{b}'
},
}, {
name: '陆亦可',
des: '汉东省检察院反贪局一处处长',
itemStyle: {
normal: {
color: '#6696FF'
}
},
label: {
position: 'right',
formatter: '{b}'
},
}, {
name: '人',
des: '汉东省省委副书记兼政法委书记。年近六十，是一个擅长太极功夫的官场老手。侯亮平、陈海和祁同伟是其学生。',
symbolSize: 80
}, {
name: '沙瑞金',
des: '汉东省省委书记',
itemStyle: {
normal: {
color: '#6696FF'
}
},
label: {
position: 'right',
formatter: '{b}'
},
}, {
name: '高小琴',
label: {
position: 'right',
formatter: '{b}'
},
des: '山水集团董事长，是一位叱咤于政界和商界的风云人物，处事圆滑、精明干练。'
}, {
name: '高小凤',
label: {
position: 'right',
formatter: '{b}'
},
}, {
name: '安全管理',
des: '汉东省京州市公安局局长，充满正义，整治恶势力，<br/>在与检察部门的合作中从最初的质疑到之后的通力配合。',
label: {
position: 'right',
formatter: '{b}'
},
itemStyle: {
normal: {
color: '#6696FF'
}
}
}, {
name: '程度',
label: {
position: 'right',
formatter: '{b}'
},
des: '汉东省京州市公安局光明区分局局长，因犯错误，被李达康书记和赵东来局长点名要清除公安队伍。<br/>但在高小琴的帮助下，祁同伟调他当上了省公安厅办公室副主任。<br/>尽管程度逃避了所有罪责，上面也有人保他，<br/>但最终还是在反贪局局长侯亮平的缜密侦查下被绳之于法。',
}, {
name: '吴惠芬',
label: {
position: 'right',
formatter: '{b}'
},
des: '汉东省省委副书记高育良的妻子，汉东大学明史教授。',
itemStyle: {
normal: {
color: '#6696FF'
}
}
}, {
name: '赵瑞龙',
label: {
position: 'right',
formatter: '{b}'
},
des: '副国级人物赵立春的公子哥，官二代，打着老子的旗子，<br/>黑白两道通吃，可谓呼风唤雨，权倾一时。',
}, {
name: '赵立春',
label: {
position: 'right',
formatter: '{b}'
},
des: '副国级领导人，曾经的改革闯将，在权利面前，显得极其渺小。',
}, {
name: '机',
itemStyle: {
normal: {
color: '#6696FF'
}
},
symbolSize: 80
}, {
name: '梁璐',
label: {
position: 'right',
formatter: '{b}'
},
itemStyle: {
normal: {
color: '#6696FF'
}
}
}, {
name: '刘新建',
label: {
position: 'right',
formatter: '{b}'
},
}, {
name: '欧阳菁',
label: {
position: 'right',
formatter: '{b}'
},
}, {
name: '吴心怡',
label: {
position: 'right',
formatter: '{b}'
},
itemStyle: {
normal: {
color: '#6696FF'
}
}
}, {
name: '物',
symbolSize: 80
}, {
name: '丁义珍',
label: {
position: 'right',
formatter: '{b}'
},
}
],
links: links
}
]
};
区域折线图
![clipboard.png]( "clipboard.png")
option = {
tooltip: {
trigger: 'axis',
formatter:function(params){
const p = params[0];
const n = p.name;
const v = p.data;
const s = n + '<br/>风险值：' + v;
return s;
}
},
backgroundColor: '#161627',
color:'#000',
grid:{
bottom:90,
},
legend:{
show:true,
data:[
{
name:'一般风险',
icon:'circle',
textStyle:{
color:'#fff'
}
}
]
},
visualMap: {
orient:'horizontal',
bottom: 0,
left: 'center',
textStyle:{
color:'#fff'
},
pieces: [{
label:'一般风险',
gt:0,
lte:0.45,
color:'#035EF7'
},
{
label:'高风险',
gt:0.45,
lte:0.7,
color:'#FEEA45'
},{
label:'较高风险',
gt:0.7,
lte:0.86,
color:'#FF9309'
},{
label:'极高风险',
gt:0.86,
lte:1,
color:'#D70002'
}],
outOfRange: {
color: '#999',
},
},
dataZoom: [
{
type: 'inside',
},
{
type: 'slider',
start: 0,
bottom: 35,
height: '10px',
fillerColor: 'rgba(38, 117, 222, 0.1)',
borderColor: '#2675DE',
handleStyle: {
color: '#2675DE',
},
textStyle:{
color:'#fff'
},
dataBackground: {
lineStyle: {
color: '#2675DE',
},
areaStyle: {
color: 'rgba(38, 117, 222, 0.1)',
},
},
left:80,
right:80,
},
],
xAxis: {
data: ["2019-03-18", "2019-03-19", "2019-03-20", "2019-03-21"],
axisLine:{
lineStyle:{
color:'#86AFE5'
}
},
axisLabel: {
interval: 0,
rotate: 20
}
},
yAxis: {
splitLine: {
show: true,
interval:'0.2',
lineStyle:{
color:'rgba(184, 184, 184, 0.2)'
}
},
axisLine:{
lineStyle:{
color:'#86AFE5'
}
},
interval: 1,
},
series: {
name: '风险值',
type: 'line',
smooth: true,
symbolSize:8,
symbol: 'circle',
lineStyle:{
color:'#000'
},
itemStyle:{
borderWidth:2,
borderColor:'#000'
},
data:[0.2, 0.4, 0.8, 1],
markLine: {
symbol: ['none', 'none'],
data: [
{
yAxis: 0.45,
lineStyle: {
color: '#035EF7',
type: 'solid',
},
label: {
position: 'start',
}
},
{
yAxis: 0.7,
lineStyle: {
color: '#FEEA45',
type: 'solid',
},
label: {
position: 'start',
}
},
{
yAxis: 0.86,
lineStyle: {
color: '#FF9309',
type: 'solid',
},
label: {
position: 'start',
}
}
],
},
markArea: {
data: [
[{
name: '',
yAxis: 0,
itemStyle: {
color: '#035EF7'
},
}, {
yAxis: 0.45
}],
[{
name: '',
yAxis: 0.45,
itemStyle: {
color: '#FEEA45'
},
}, {
yAxis: 0.7,
}],
[{
name: '',
yAxis: 0.7,
itemStyle: {
color: '#FF9309'
},
}, {
yAxis: 0.9,
}],
[{
name: '',
yAxis: 0.9,
itemStyle: {
color: '#D70002'
},
}, {
yAxis: 1,
}]
]
},
},
};
创建实例
var chart = echarts.init(document.getElementById('chartBox'));
设置图表实例的配置项
设置图表实例的配置项以及数据，万能接口，所有参数和数据的修改都可以通过setOption完成，ECharts 会合并新的参数和数据，然后刷新图表
chart.setOption(option);
查看原文
{代码...} 堆叠区域图 {代码...} 利用富文本样式定制ｘ轴文字 {代码...} 饼图 {代码...} 堆叠柱状图 {代码...} 渐变柱状图 {代码...} 线图 {代码...} 雷达图 {代码...} 分段折线图 {代码...} 关系图 {代码...} 区域折线图 {代码...} 创建实例 {代码...} 设置图表实例...
