1.折线图:
(1).代码:
const self = this
let chart = echarts.init(self.$refs.chart)
// 数据
let date = ['1-22', '1-23', '1-24', '1-25', '1-26', '1-27', '1-28', '1-29', '1-30', '1-31', '2-1', '2-2', '2-3', '2-4']
let total = [26, 28, 33, 61, 51, 19, 16, 35, 70, 88, 97, 103, 142, 114]
let inflow = [12, 8, 13, 29, 33, 10, 7, 11, 30, 35, 37, 46, 49, 51]
let outflow = [14, 20, 20, 32, 18, 9, 9, 24, 40, 45, 60, 57, 93, 63]
// 配置
let option = {
title: {
text: '全省人口流动趋势图',
textStyle: {
fontWeight: 400,
fontSize: 14,
fontFamily: 'PingFangSC-Regular,PingFang SC',
color: 'rgba(70,81,102,1)',
lineHeight: 20
},
left: '-5',
top: '-5'
},
tooltip: {
show: false
// trigger: 'axis',
// axisPointer: {
// lineStyle: {
// color: '#57617B'
// }
// }
},
legend: {
icon: 'rect',
itemWidth: 12,
itemHeight: 12,
itemGap: 13,
data: ['流入流出合计', '流入', '流出'],
textStyle: {
fontSize: 12,
color: 'rgba(70,81,102,1)',
},
top: '12%',
right: '0'
},
grid: {
left: '0',
right: '4',
bottom: '0',
containLabel: true
},
xAxis: [{
type: 'category',
boundaryGap: false,
axisLine: {
lineStyle: {
color: '#A5AAB3'
}
},
axisLabel: {
rotate: 70,
},
axisTick: {
show: false
},
data: date
}],
yAxis: [{
type: 'value',
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
margin: 10,
textStyle: {
fontSize: 12
},
color: '#A5AAB3'
},
splitLine: {
lineStyle: {
color: '#A5AAB3'
}
}
}],
series: [{
name: '流入流出合计',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 5,
showSymbol: false,
lineStyle: {
normal: {
width: 1
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(168, 232, 236, 0.9)'
}, {
offset: 1,
color: 'rgba(168, 232, 236, 0)'
}], false),
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10
}
},
itemStyle: {
normal: {
color: 'rgb(168, 232, 236)',
borderColor: 'rgba(168, 232, 236)',
borderWidth: 12
}
},
data: total
}, {
name: '流入',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 5,
showSymbol: false,
lineStyle: {
normal: {
width: 1
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(233, 127, 147, 0.9)'
}, {
offset: 1,
color: 'rgba(233, 127, 147, 0)'
}], false),
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10
}
},
itemStyle: {
normal: {
color: 'rgb(233, 127, 147)',
borderColor: 'rgba(233, 127, 147)',
borderWidth: 12
}
},
data: inflow
}, {
name: '流出',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 5,
showSymbol: false,
lineStyle: {
normal: {
width: 1
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(238, 158, 114, 0.9)'
}, {
offset: 1,
color: 'rgba(238, 158, 114, 0)'
}], false),
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10
}
},
itemStyle: {
normal: {
color: 'rgb(238, 158, 114)',
borderColor: 'rgba(238, 158, 114)',
borderWidth: 12
}
},
data: outflow
}]
}
chart.setOption(option, true)
(2).效果截图(数据均为模拟数据):
2.饼图:
(1).代码:
const self = this
let chart = echarts.init(self.$refs.chart)
let color = ['#E15822', '#FFB061', '#FFDDBB', '#00D3AE', '#7E7E7E']
let option = {
title: {
text: '病情分布',
x: 'center',
y: 'center',
textStyle: {
color: '#465166',
fontSize: 14,
fontWeight: '400',
fontFamily: 'PingFangSC-Regular,PingFang SC'
}
},
tooltip: {
show: true,
},
series: [{
name: '病情分布',
type: 'pie',
radius: [30, 55],
center: ['50%', '50%'],
roseType: 'radius',
color: color,
label: {
normal: {
formatter: function (params) {
return params.data.name + ' ' + params.data.value + ' ' + '例'
}
},
},
data: [{
name: '危症',
value: 23
}, {
name: '重症',
value: 41
}, {
name: '平稳',
value: 63
}, {
name: '治愈',
value: 12
}, {
name: '死亡',
value: 2
}]
}]
}
chart.setOption(option, true)
(2).效果截图(数据均为模拟数据):
3.环形图:
说明:这个例子来源于https://gallery.echartsjs.com/editor.html?c=xByzFvaw1M,用的时候可以做一下修改。
(1).代码:
let scale = 1;
let echartData = [{
value: 2154,
name: '曲阜师范大学'
}, {
value: 3854,
name: '潍坊学院'
}, {
value: 3515,
name: '青岛职业技术学院'
}, {
value: 3515,
name: '淄博师范高等专科'
}, {
value: 3854,
name: '鲁东大学'
}, {
value: 2154,
name: '山东师范大学'
}]
let rich = {
yellow: {
color: "#ffc72b",
fontSize: 30 * scale,
padding: [5, 4],
align: 'center'
},
total: {
color: "#ffc72b",
fontSize: 40 * scale,
align: 'center'
},
white: {
color: "#fff",
align: 'center',
fontSize: 14 * scale,
padding: [21, 0]
},
blue: {
color: '#49dff0',
fontSize: 16 * scale,
align: 'center'
},
hr: {
borderColor: '#0b5263',
width: '100%',
borderWidth: 1,
height: 0,
}
}
let option = {
title: {
text:'总考生数',
left:'center',
top:'53%',
padding:[24,0],
textStyle:{
color:'#fff',
fontSize:18*scale,
align:'center'
}
},
legend: {
selectedMode:false,
formatter: function(name) {
let total = 0; //各科正确率总和
let averagePercent; //综合正确率
echartData.forEach(function(value, index, array) {
total += value.value;
});
return '{total|' + total + '}';
},
data: [echartData[0].name],
// data: ['高等教育学'],
// itemGap: 50,
left: 'center',
top: 'center',
icon: 'none',
align:'center',
textStyle: {
color: "#fff",
fontSize: 16 * scale,
rich: rich
},
},
series: [{
name: '总考生数量',
type: 'pie',
radius: ['42%', '50%'],
hoverAnimation: false,
color: ['#c487ee', '#deb140', '#49dff0', '#034079', '#6f81da', '#00ffb4'],
label: {
textStyle: {
fontSize: 12
},
normal: {
formatter: function(params, ticket, callback) {
let total = 0; //考生总数量
let percent = 0; //考生占比
echartData.forEach(function(value, index, array) {
total += value.value;
});
percent = ((params.value / total) * 100).toFixed(1);
return '{white|' + params.name + '}\n{hr|}\n{yellow|' + params.value + '}\n{blue|' + percent + '%}';
},
rich: rich
},
},
labelLine: {
normal: {
length: 55 * scale,
length2: 0,
lineStyle: {
color: '#0b5263'
}
}
},
data: echartData
}]
};
chart.setOption(option, true)
(2).效果截图(数据均为模拟数据):