Echarts 使用过的实例整理
目录
柱状图_01（左右分布）
var option = {
tooltip: {
trigger: \'axis\',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: \'shadow\' // 默认为直线，可选为：\'line\' | \'shadow\'
},
formatter: (params) => {
if (!params.length) return \'\'
let s = params[0].axisValueLabel + \'<br/>\'
for (const iterator of params) {
// 如果是负数则反转
let d = iterator.data < 0 ? -iterator.data : iterator.data
s += iterator.marker + iterator.seriesName + \'：\' + d + \'<br/>\'
}
return s
}
},
legend: {
data: [\'男\', \'女\']
},
grid: {
left: \'3%\',
right: \'4%\',
bottom: \'3%\',
containLabel: true
},
xAxis: [{
type: \'value\',
axisLabel: {
formatter: (value) => {
// 负数取反 显示的就是正数了
if (value < 0) return -value
else return value
}
}
}],
yAxis: [{
type: \'category\',
axisTick: {
show: false
},
data: [\'儿童\', \'少年\', \'青年\', \'中年\', \'老年\']
}],
series: [{
name: \'男\',
type: \'bar\',
stack: \'人口\',
label: {
show: true
},
data: [320, 302, 341, 374, 390]
},
{
name: \'女\',
type: \'bar\',
stack: \'人口\',
label: {
show: true,
position: \'inside\',
formatter: (value) => {
// 值都是负数的 所以需要取反一下
return -value.data
}
},
data: [-120, -132, -101, -134, -190]
}
]
};
实例效果
柱状图_02（象形柱状图）
var option = {
tooltip: {
trigger: \'axis\',
axisPointer: {
type: \'none\'
},
formatter: function(params) {
return params[0].name + \': \' + params[0].value;
}
},
xAxis: {
data: [\'小区数\', \'楼栋数\', \'出租房\', \'空房数\'],
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
textStyle: {
color: \'#0DC3B4\',
}
}
},
yAxis: {
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
show: false
}
},
color: [\'#0DC3B4\'],
series: [{
name: \'hill\',
type: \'pictorialBar\',
barCategoryGap: \'-130%\',
symbol: \'path://M0,10 L10,10 L5,0 L0,10 z\',
// symbol: \'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z\',
itemStyle: {
opacity: 0.1
},
emphasis: {
itemStyle: {
opacity: 1
}
},
data: [13, 60, 25, 18],
z: 10
}]
};
// 加个动态显示提示框
myChart.setOption(option);
var countRoom = 0;
var timmerOneAnimRoom = null;
if (timmerOneAnimRoom) {
clearInterval(timmerOneAnimRoom);
}
timmerOneAnimRoom = setInterval(() => {
myChart.dispatchAction({
type: "showTip",
seriesIndex: 0,
dataIndex: countRoom % 4 //列数
});
countRoom++;
}, 4000);
图例效果
雷达图_01
var option = {
title: {
text: \'{bb|重点人员总数:}{ii|50}{bb|人}\',
x: \'right\', //水平安放位置，默认为\'left\'，可选为：\'center\' | \'left\' | \'right\' | {number}（x坐标，单位px）
y: \'5%\', //垂直安放位置，默认为top，可选为：\'top\' | \'bottom\' | \'center\' | {number}（y坐标，单位px）
textStyle: { //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
fontFamily: \'Source Han Sans CN\',
fontSize: 25,
fontStyle: \'normal\',
fontWeight: \'normal\',
lineHeight: 20,
rich: {
bb: {
fontFamily: \'Source Han Sans CN\',
fontSize: 15,
fontWeight: 600,
color: \'#333333\'
},
ii: {
color: \'#5797D6\',
fontSize: 18,
fontWeight: 600
}
}
},
},
tooltip: {},
// legend: {
// data: [\'预算分配（Allocated Budget）\', \'实际开销（Actual Spending）\']
// },
radar: {
// shape: \'circle\',
name: {
textStyle: {
color: \'#fff\',
backgroundColor: \'#999\',
borderRadius: 3,
padding: [3, 5]
}
},
center: [\'50%\', \'50%\'],
radius: [\'10%\', \'60%\'],
indicator: [{
name: \'重点青少年\',
max: 6500
},
{
name: \'刑满释放人员\',
max: 16000
},
{
name: \'严重精神障碍患者\',
max: 30000
},
{
name: \'重点信访人员\',
max: 38000
},
{
name: \'社区矫正人员\',
max: 52000
},
{
name: \'吸毒人员\',
max: 25000
}
]
},
series: [{
name: \'\',
type: \'radar\',
// areaStyle: {normal: {}},
data: [{
value: [4300, 10000, 28000, 35000, 50000, 19000],
name: \'重点人员分析\',
areaStyle: {
opacity: 0.5,
color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [{
color: \'rgba(23,200,189)\',
offset: 0
},
{
color: \'rgba(211,252,254)\',
offset: 1
}
])
}
}, ]
}]
};
实例效果
环形图_01
var option = {
tooltip: {
trigger: \'item\',
formatter: \'{b}: {c} ({d}%)\'
},
// grid: {
// top: 3%
// },
series: [{
name: \'\',
type: \'pie\',
radius: [\'35%\', \'50%\'],
center: [\'50%\', \'60%\'],
startAngle: 100,
minAngle: 5, //最小的扇区角度（0 ~ 360），用于防止某个值过小导致扇区太小影响交互
avoidLabelOverlap: true,
label: {
normal: {
show: true,
formatter: \'{b|{b}}\n{hr|}\n{b|{c}次|{d}%}\',
textStyle: {
fontSize: this.standSize / 150,
color: "black"
},
rich: {
b: {
color: \'black\',
lineHeight: 20
},
hr: {
borderColor: \'#A5B5F9\',
width: \'100%\',
borderWidth: 1,
height: 0
},
}
}
},
itemStyle: {
normal: {
borderWidth: 3,
borderColor: \'#EFEFF4\',
color: function(params) {
//自定义颜色
var colorList = [
\'#444349\', \'#F7A35B\', \'#7CB5EC\', \' #F25C00 \', \'#9090E0\', \'#4AC2A1\', \'#06cfbf\', \'#017717\', \'#ff467a\',\'#1c61fe\', \'#fec61c\', \'#e61cfe\'
];
return colorList[params.dataIndex]
}
},
// emphasis: {
// shadowBlur: 5,
// shadowOffsetX: 0,
// shadowColor: \'rgba(30, 144, 255，0.5)\'
// }
},
emphasis: {
label: {
show: true,
fontSize: \'30\',
fontWeight: \'bold\'
}
},
labelLine: {
normal: {
lineStyle: {
type: \'solid\'
},
length: 10,
length2: 25,
}
},
data: [
{value: 335, name: \'直接访问\'},
{value: 310, name: \'邮件营销\'},
{value: 234, name: \'联盟广告\'},
{value: 135, name: \'视频广告\'},
{value: 1548, name: \'搜索引擎\'}
]
}]
};
实例效果
data不是一样的，图片效果是后台返回的数据显示的。
折线图_01（颜色渐变）
var option = {
xAxis: {
type: \'category\',
boundaryGap: false,
data: ["2020-11-19", "2020-11-20", "2020-11-21", "2020-11-22", "2020-11-23", "2020-11-24", "2020-11-25"],
axisTick: { //x轴刻度线
"show": false
},
axisLine: { //x轴
"show": false,
lineStyle: {
color: "#999999",
}
},
},
yAxis: {
show: false,
type: \'value\'
},
tooltip: {
//鼠标悬停提示内容
trigger: \'axis\', // 触发类型，默认数据触发，可选为：\'axis\' item
triggerOn: "click",
formatter: "{b} {c}次",
},
series: [{
center: [\'50%\', \'60%\'],
name: \'样例3\',
smooth: true,
type: \'line\',
// symbol: "none",
symbol: \'circle\',
showSymbol: false,
itemStyle: {
color: \'#6A5ACD\',
normal: {
color: \'#6A5ACD\',
lineStyle: { // 系列级个性化折线样式
width: 1,
type: \'solid\',
//颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: \'rgba(45,156,251)\'
}, {
offset: 1,
color: \'rgba(228,242,255)\'
}])
}
},
emphasis: {
color: \'#6A5ACD\',
lineStyle: { // 系列级个性化折线样式
width: 2,
type: \'dotted\',
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: \'#1E90FF\'
}, {
offset: 1,
color: \'#0000FF\'
}])
}
}
}, //线条样式
areaStyle: {
normal: {
//颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: \'rgba(45,156,251)\'
}, {
offset: 1,
color: \'rgba(228,242,255)\'
}])
}
}, //区域颜色渐变
data: ["6", "1", "1", "0", "0", "0", "0"]
}]
};
实例效果
折线图_02（实点网格线）
var option = {
xAxis: {
type: \'category\',
boundaryGap: false,
data: ["2020-11-19", "2020-11-20", "2020-11-21", "2020-11-22", "2020-11-23", "2020-11-24", "2020-11-25"],
axisTick: { //x轴刻度线
"show": false
},
axisLine: { //x轴
"show": true,
lineStyle: {
color: \'#999999\',
},
},
splitLine: {
show: true,
lineStyle: {
type: \'solid\',
color: \'rgba(211, 211, 211, 0.2)\'
}
}
},
yAxis: {
type: \'value\',
axisTick: { //y轴刻度线
"show": false
},
name: \'单位：\' + type,
axisLine: { //y轴
"show": true,
lineStyle: {
color: \'#999999\',
},
},
splitLine: {
show: true,
lineStyle: {
type: \'solid\',
color: \'rgba(211, 211, 211, 0.2)\'
}
}
},
tooltip: {
//鼠标悬停提示内容
trigger: \'axis\', // 触发类型，默认数据触发，可选为：\'axis\' item
triggerOn: "click",
formatter: "{b} {c}",
backgroundColor: "#0DC3B4"
},
series: [{
center: [\'50%\', \'60%\'],
name: \'单位:次\',
type: \'line\',
symbol: \'circle\', //拐点设置为实心
symbolSize: 6, //拐点大小
itemStyle: {
color: \'#6A5ACD\',
normal: {
color: \'#0DC3B4\', //拐点颜色
lineStyle: { // 系列级个性化折线样式
width: 2,
type: \'solid\',
color: \'#0DC3B4\',
},
emphasis: {
color: \'#0DC3B4\' //hover拐点颜色定义
}
}
}, //线条样式
data: ["6", "1", "1", "0", "0", "0", "0"]
}]
};
实例效果
折线图_03（空心点）
var option = {
xAxis: {
type: \'category\',
data: ["2020-11-19", "2020-11-20", "2020-11-21", "2020-11-22", "2020-11-23", "2020-11-24", "2020-11-25"],
axisLine: { //x轴
lineStyle: {
color: \'#999999\',
},
},
},
yAxis: {
show: false,
type: \'value\'
},
tooltip: {
//鼠标悬停提示内容
trigger: \'axis\', // 触发类型，默认数据触发，可选为：\'axis\' item
triggerOn: "click",
formatter: "{b} {c}次" + type
},
series: [{
center: [\'50%\', \'60%\'],
data: ["0", "0", "2", "0", "0", "0", "0"],
type: \'line\',
symbolSize: 8, //拐点圆的大小
color: [\'#E142F4\'], //折线条的颜色
smooth: true
}]
};