Echarts实例整理（持续更新）
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
}]
};
实例效果
世间种种的诱惑，不惊不扰我清梦
