目录
这里使用饼图中的环形图作为示例
首先新建一个盒子,通过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}' //这个意思大概就是上层是百分比下层是名称
},
},
原先官网给出的图
修改之后的效果:
加个自动的时间戳详情见自动轮播提示框