由于接下来的项目可能会大量用到图表显示与交互,所以抽空仔细看了下echarts文档。顺手根据可能有的项目需求写了个饼图demo。本例只写出demo所用配置的注意点,以后再有其他需求时会继续更新。
需求点如下:
为完成以上功能点,需了解的配置注意点是:
label
属性配置文本标签,用于说明数据信息,可配置emphasis
高亮状态labelLine
属性配置标签视觉引导线formatter
属性配置内容格式化,支持字符串模板和回调函数两种形式,采用回调函数形式时注意函数参数的区别graphic
属性可将部分图形元素添加到echarts图表中,支持的图形元素包括image, text, circle等十余种,本例用来实现需求4具体demo如下,部分代码作用看注释:
import echarts from "echarts";
import "../sass/common.scss";
var chartData = {
value: 200,
name: "总订货量",
detail: {
"已交收量": 50,
"未交收量": 150
}
}
var chartColor = [ "##70F2D2", "##FF483C", "#3994FD", "#FFC400", "#E5E5E5" ]
// 初始化echarts实例
let chartInst = echarts.init( document.getElementById( "echartMain" ) );
// 指定图表的配置项和数据
let options = {
title: {
text: 'doughnut chart'
},
// 提示框组件
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
// 图例组件
legend: {
orient: 'vertical',
right: "4%",
top: "45%",
data: [ "已交收量", "未交收量" ],
formatter: function ( name ) {
var valNum = 0;
for( var i in chartData.detail ){
if( i === name ){
valNum = chartData.detail[i]
}
}
return name + valNum + "手";
}
},
// 原生图形元素组件
graphic: [
{
type: 'group',
left: '45%',
top: 'center',
width: 100,
height: 100,
children: [
{
type: 'text',
z: 100,
left: 'center',
top: '80%',
style: {
fill: '#377ade',
fontSize: 16,
text: [
chartData.value + "手"
].join('\n'),
font: "16px Microsoft YaHei"
}
},
{
type: 'text',
z: 100,
left: 'center',
top: '100%',
style: {
fill: '#999',
fontSize: 16,
text: [
chartData.name
].join('\n'),
font: "16px Microsoft YaHei"
}
}
],
onclick: function ( e ) {
console.log( e );
}
}
],
// 系列组件,控制图表类型,如饼图、折线图等
series: [{
name: '销量',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
legendHoverLink: true, // 是否启用图例 hover 时的联动高亮。
hoverAnimation: true, // 是否开启 hover 在扇区上的放大动画效果。
// hoverOffset: 10,
// 文本标签
label: {
// 正常情况下
normal: {
show: false,
},
// hover高亮情况下
emphasis: {
show: true,
formatter: function ( params ) {
var str = '{valSty|' + params.value + '手}\n{nameSty|' + params.name + '}'
return str;
},
rich: {
valSty: {
color: "#333",
fontSize: 20,
fontWeight: 700,
height: 30
},
nameSty: {
color: "#999",
fontSize: 20,
}
}
}
},
// 文本标签的视觉引导线
labelLine: {
length: 30,
length2: 60
},
// 设置扇区图形样式
itemStyle: {
color: function ( params ) {
var colorArr = [ "#3994FD", "#E5E5E5" ];
return colorArr[ params.dataIndex ];
}
},
// 设置高亮样式
emphasis: {
itemStyle: {
// color: {
// type: 'linear',
// x: 0.4,
// y: 1,
// x2: 1,
// y2: 0.4,
// colorStops: [{
// offset: 0, color: '#3994FD' // 0% 处的颜色
// }, {
// offset: 1, color: '#A9CBF5' // 100% 处的颜色
// }],
// global: false // 缺省为 false
// }
}
},
data: [
{ value: 50, name: "已交收量" },
{ value: 150, name: "未交收量" }
]
}]
}
// 使用刚指定的配置项和数据显示图表。
chartInst.setOption( options );
console.log( chartInst.getWidth() );
console.log( chartInst.getHeight() );
console.log( chartInst.getDom() );
console.log( chartInst.getOption() );
// chartInst.resize( {
// width: 800,
// height:600
// } )
图表显示截图如下:
扇区悬浮时高亮显示:
echarts能够满足大部分的图表需求,但有些比较少见的需求还是需要自己动下脑筋灵活实现。小伙伴们如有比较好的配置技巧心得,可以留言展示下呀。
参考资料:
1. ECharts文档 https://echarts.baidu.com/option.html