- 折线图
效果图
html
<template> <div id="v11-charts3"></div> </template>
js
export default {
methods: {
// 初始化
init(){
this.chart3 = echarts.init(document.getElementById('v11-charts3'));
this.chart3.setOption(option3);
}
},
option3: {
// 直角坐标系内绘制表格
grid: {
show: true,
left: 23,
top: 25,
right: 24,
bottom: 14,
borderColor: '#0a2549',
containLabel: true,
borderWidth: 4
},
// 图例组件
legend: {
left: 'right',
textStyle: {
color: '#fff'
},
// 图例的数据数组
data:[
{
name: '日常'
},
{name: '当前'}
]
},
// 图例的 tooltip 配置
tooltip: {
show: true,
trigger: 'axis',
axisPointer: {
type: 'line'
}
},
// 直角坐标系 grid 中的 x 轴
xAxis: {
type: 'category',
// name: '(TB)',
nameLocation: 'start',
nameGap: 30,
boundaryGap: false,
// 坐标轴轴线相关设置
axisLine: {
show: true,
lineStyle: {
color: '#6a9bcc',
width: 2
}
},
// 坐标轴刻度标签的相关设置
axisLabel: {
show: true,
fontSize: 14,
margin: 12,
fontFamily: 'Microsoft YaHei',
color: '#ffffff'
},
// 坐标轴刻度相关设置
axisTick: {
show: false
},
data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23]
},
// 直角坐标系 grid 中的 y 轴
yAxis: {
type: 'value',
show: true,
splitNumber: 4,
//y轴颜色
axisLine: {
show: true,
lineStyle: {
color: '#99c2ff',
width: 2
}
},
axisLabel: {
show: true,
fontSize: 14,
margin: 15,
fontFamily: 'Microsoft YaHei',
color: '#ffffff'
},
// 坐标轴在 grid 区域中的分隔线
splitLine: {
show: true,
lineStyle: {
color: '#294277',
width: 1,
type: 'solid'
}
},
axisTick: {
show: false
}
},
// 系列列表
series: [
{
type: 'line',
name: '当前',
symbolSize: 2,
smooth: true,
itemStyle: {
normal: {
color: '#00ffaa',
// lineStyle: {
// color: "#2ec7c9"
// }
borderColor:'#00ffaa',
borderWidth:'4',
// 线条样式
lineStyle: {
normal: {
color: '#00ffaa',
width: 2
}
},
}
},
// 区域填充样式
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
// color: 'rgba(101, 84, 170, 0.3)' // 0% 处的颜色
color: '#276d85'
}, {
offset: 1,
// color: 'rgba(16, 27, 77, 0)' // 100% 处的颜色
color: '#011441'
}], false)
}
},
data: [820, 932, 901, 934, 1290, 1330, 1320, 820, 932, 901, 934, 1290, 1330, 1320, 820, 932, 901, 934, 1290, 1330,]
},
{
type: 'line',
name: '日常',
symbolSize: 2,
smooth: true,
//拐点样式
itemStyle: {
normal: {
//本应该是拐点颜色,此处成了线条颜色,不知道啥原因
color: '#ad85ff',
//拐点边框颜色
borderColor:'#ad85ff',
borderWidth:'4',
// 线条样式
lineStyle: {
normal: {
// color: '#ac84fe',
width: 2
}
},
}
},
//区域样式
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
// color: 'rgba(12, 42, 82, 0.8)' // 0% 处的颜色
color: '#836bcd'
}, {
offset: 1,
// color: 'rgba(3, 243, 167, 0)' // 100% 处的颜色
color: '#00123b'
}], false)
}
},
data: [520, 632, 601, 444, 990, 830, 520, 632, 601, 444, 990, 830, 520, 632, 601, 444, 990, 830]
}
]
},
- 饼图(option配置不同)
效果图
option1: {
series: [
{
type: 'pie',
silent: true,
radius: ['30%', '60%'],
startAngle: 0,
label: {
normal: {
show: true,
position: 'outside',
fontSize: 20,
align: 'center',
fontFamily: 'MF_LangQian',
// formatter: '{b}',
formatter: function(params) {
if (params.name === '') {
return 0 + '%'
}
}
}
},
labelLine: {
normal: {
show: true,
length: 40,
lineStyle: {
width: 2
}
}
},
itemStyle: {
normal: {
borderWidth: 3,
borderColor: 'rgba(1,9,22,0.9)'
},
emphasis: {
borderWidth: 0,
shadowBlur: 5,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.2)'
}
},
data: [
{
value: 55,
name: '0',
itemStyle: {
normal: {
// 图形的颜色
color: '#faef6f'
// color: 'yellow'
}
}
},
{
value: 55,
name: '59',
itemStyle: {
normal: {
color: '#00d5ff'
}
}
},
{
value: 55,
name: '51',
itemStyle: {
normal: {
color: '#26bd59'
}
}
},
{
value: 55,
name: '14',
itemStyle: {
normal: {
color: '#d6c956'
}
}
}
]
}
]
}