https://echarts.apache.org/zh/index.html
1.图示
image.png
2.完整代码
createEcharts2 () {
// 基于准备好的dom，初始化echarts实例
let echart2 = document.getElementById('echart2')
this.myChart2 = echarts.init(echart2)
if (this.myChart2) {
// 绘制图表
// let data = {'已上传数量':12,'未上传数量':13};
let data = [
{
name: '识别正常',
value: this.chartData2.uploadNormalCount
},
{
name: '识别异常',
value: this.chartData2.uploadSingularCount
}
]
let option = {
color: ['#1890FF', '#FF9933'],
//图例组件。
legend: {
orient: 'vertical',
right: '30',
bottom: '40',
itemGap: 20,
data: ['识别正常', '识别异常'],
// formatter: ['name','{c}']
formatter: function (name) {
let value = null
data.forEach(i => {
i.name == name ? (value = i.value) : ''
})
return '{a|' + name + '}' + '{b|' + value + '}'
},
textStyle: {
rich: {
a: {},
b: {
// padding: [0, 0, 0, 80],
fontSize: 14
}
}
}
},
//提示内容
title: {
zlevel: 0,
text: [
'{value|' + this.chartData2.uploadCount + '}',
'{name|已扫描}'
].join('\n'),
top: '30%',
left: '24%',
textAlign: 'center',
textStyle: {
rich: {
value: {
color: '#303133',
fontSize: 24,
lineHeight: 35
},
name: {
color: '#909399',
fontSize: 14,
lineHeight: 28
}
}
}
},
calculable: true,
//数据块
series: [
{
name: '已上传数量',
type: 'pie',
radius: ['50%', '90%'],
center: ['25%', '50%'],
label: {
normal: {
backgroundColor: '#ffffff',
show: false,
position: 'center',
formatter: ['{value|{c}}', '{name|{b}}'].join('\n'),
rich: {
value: {
color: '#ffffff',
fontSize: 40,
fontWeight: 'bold',
lineHeight: 40
},
name: {
color: '#909399',
lineHeight: 20
}
}
}
},
itemStyle: {
normal: {
label: {
show: false
},
labelLine: {
show: false
}
}
//悬浮显示内容
// emphasis: {
// label: {
// show: false,
// position: ['50%', '50%'],
// textStyle: {
// fontSize: '20'
// }
// }
// }
},
data: data
}
]
}
this.myChart2.setOption(option)
//仅限单个echart才可以
// setTimeout(() => {
// window.onresize = function() {
// myChart.resize()
// }
// }, 200)
}
}
3.针对图例组件 legend 单独详解 https://echarts.apache.org/zh/option.html#legend
图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。
image.png
image.png
- 默认没有显示数字，只显示颜色和名字
legend: {
orient: 'vertical',
right: '30',
bottom: '40',
itemGap: 20,
data: ['识别正常', '识别异常'],
// formatter: ['name','{c}']
formatter: function (name) {
let value = null
data.forEach(i => {
i.name == name ? (value = i.value) : ''
})
return '{a|' + name + '}' + '{b|' + value + '}'
},
textStyle: {
rich: {
a: {},
b: {
// padding: [0, 0, 0, 80],
fontSize: 14
}
}
}
},
legend.formatter 只返回当前键名，没有返回键值，所以需要自己处理，通过自己定义的data数据格式，进行循环对比，返回键值。
- 通过给 return '{a|' + name + '}' + '{b|' + value + '}' name和value添加别名，进行textStyle文字样式控制。
4. 对 title 进行详解 https://echarts.apache.org/zh/option.html#title
标题组件，包含主标题和副标题。
- 居中标题
image.png
代码展示：
title: {
zlevel: 0,
text: [
'{value|' + this.chartData2.uploadCount + '}',
'{name|已扫描}'
].join('\n'),
top: '30%',
left: '24%',
textAlign: 'center',
textStyle: {
rich: {
value: {
color: '#303133',
fontSize: 24,
lineHeight: 35
},
name: {
color: '#909399',
fontSize: 14,
lineHeight: 28
}
}
}
},
5. tooltip 提示 https://echarts.apache.org/zh/option.html#tooltip
-
图示
image.png
tooltip : {
trigger: 'item',
formatter: "{a}
{b} : {c} ({d}%)"
},