这里使用饼图中的环形图作为示例
首先新建一个盒子，通过ref获取DOM元素，并设置其宽高（一定要加宽高！）
<div ref="opendoor" style="width: 100%; height: 225px"></div>
创建饼图并修改其样式
var myChart = echarts.init(this.$refs.opendoor); var option; option = { tooltip: { trigger: "item", backgroundColor: "rgba(74, 144, 226, 0.84)", }, // 右侧的五个小圆球 legend: { orient: "vertical", right: 10, bottom: 20, textStyle: { color: "#999", padding: [2, 0, 0, 3], // 提示内边距 }, icon: "circle", // 形状 itemWidth: 10, itemHegiht: 10, selectedMode: false, // 禁用鼠标移动显示效果 }, series: [ // 对饼图以及内容的操作 { name: "开门渠道占比", type: "pie", left: "-22%", top: "3%", radius: ["50%", "70%"], avoidLabelOverlap: false, // center: ["50%", "50%"], label: { show: false, position: "center", }, itemStyle: { borderWidth: 2, borderColor: "rgba(16,16,21,0.4)", }, emphasis: { label: { color: "#4a90e2", show: true, fontSize: "14", lineHeight: 22, }, }, color: [ "#60ADCD", "#517EDA", "#C95C45", "#F6BD16", "#51BC93", "#536382", ], labelLine: { show: true, }, data: optionData, }, ], }; option && myChart.setOption(option);
在外层包裹一个函数进行使用
rightBottom() { if (userChannelData.code !== 0) return; let optionData = [ {value: userChannelData.data.wxMiniOpenCount || 0, name: '小程序开门'}, {value: userChannelData.data.userFaceOpenCount || 0, name: '人脸开门用户'}, {value: userChannelData.data.appOpenCount || 0, name: 'App开门'}, {value: userChannelData.data.aliPayOpenCount || 0, name: '支付宝开门'}, {value: userChannelData.data.otherOpenCount || 0, name: '其他'} ] var myChart = echarts.init(this.$refs.opendoor); var option; option = { tooltip: { // 提示框样式 trigger: "item", backgroundColor: "rgba(74, 144, 226, 0.84)", }, // 右侧的五个小圆球 legend: { orient: "vertical", right: 10, // 位置 bottom: 20, textStyle: { color: "#999", padding: [2, 0, 0, 3], // 提示内边距 }, icon: "circle", // 形状 itemWidth: 10, itemHegiht: 10, selectedMode: false, // 禁用鼠标移动显示效果 }, series: [ // 对饼图以及内容的操作 { name: "开门渠道占比", type: "pie", left: "-22%", top: "3%", radius: ["50%", "70%"], avoidLabelOverlap: false, // center: ["50%", "50%"], label: { show: false, position: "center", }, itemStyle: { borderWidth: 2, borderColor: "rgba(16,16,21,0.4)", }, emphasis: { label: { color: "#4a90e2", show: true, fontSize: "14", lineHeight: 22, }, }, color: [ "#60ADCD", "#517EDA", "#C95C45", "#F6BD16", "#51BC93", "#536382", ], labelLine: { show: true, }, data:optionData , }, ], }; option && myChart.setOption(option); }, mounted中调用 this.rightBottom();// 开门渠道占比
把图表中的data单独拎出来进行百分比装换（里面是模拟的数据结构）
let optionData = [ {value: userChannelData.data.wxMiniOpenCount || 0, name: '小程序开门'}, {value: userChannelData.data.userFaceOpenCount || 0, name: '人脸开门用户'}, {value: userChannelData.data.appOpenCount || 0, name: 'App开门'}, {value: userChannelData.data.aliPayOpenCount || 0, name: '支付宝开门'}, {value: userChannelData.data.otherOpenCount || 0, name: '其他'}
结构如下：
tooltip中的formatter属性（提示框设置）
内容如下给出解释：
tooltip : { formatter: '{a} <br/>{b}: {c} ({d}%)',//默认值null，内容格式器 //折线（区域）图、柱状（条形）图、K线图 : a（系列名称），b（类目值），c（数值）, d（无） //散点图（气泡）图 : a（系列名称），b（数据名称），c（数值数组）, d（无） //地图 : a（系列名称），b（区域名称），c（合并数值）, d（无） //饼图、雷达图、仪表盘、漏斗图: a（系列名称），b（数据项名称），c（数值）, d（饼图：百分比 | 雷达图：指标名称） }
效果如下：
鼠标旋移中间的样式如下：
emphasis: { label: { color: "#4a90e2", show: true, fontSize: "14", lineHeight: 22, formatter: '{d}% \n {b}' //这个意思大概就是上层是百分比下层是名称 }, },
原先官网给出的图
修改之后的效果：
加个自动的时间戳详情见自动轮播提示框
