目录
1.安装echarts
2.引入echarts
3.创建要放入echarts实例的一个盒子
4.创建echarts实例
5.随着legend动态显示数据总数
效果视频
1.安装echarts
npm install echarts --save2.引入echarts
在 当前vue文件中引入 echarts
如下图所示：
3.创建要放入echarts实例的一个盒子
切记：必须给echarts实例盒子宽高
如下图所示：
4.创建echarts实例
这里就此案例对echarts环形图进行了简单的设置和讲解
<template>
<div id="main">
</div>
</template>
<script>
import * as echarts from 'echarts'
export default {
data() {
return {
echartsSumnum: 0,//数据总数
option: {
// 设置标题
title: {
text: '',//主标题 (主标题里面来动态显示当前数据总数)
subtext: '总数',//副标题
x: 'center',//标题x轴居中（也可以是: left || center || right || 百分比：xx% || xx(默认单位px) ）
y: 'center',//标题y轴居中（也可以是: top || center || bottom || 百分比：xx% || xx(默认单位px) ）
itemGap: -5,//主标题和副标题之间的距离(默认为 0)
textStyle: {//设置主标题样式
fontSize: 40,
color: '#666',
backroung: 'blue'
},
subtextStyle: {//设置副标题样式
fontSize: 20,
color: "#666"
}
},
// 鼠标滑过显示悬浮框
tooltip: {
// show:true,//鼠标滑过是否显示悬浮框 （默认为true开启 false为关闭）
//设置悬浮框内展示的内容
// a:series.name b:series.data.name c:series.data.value d:当前数据所占数据的百分比
formatter: '{a}</br>{b}: {c} </br>所占比例: {d}%',
},
// 设置图例
legend: {
orient: 'vertical',//图例的排列方式 （默认 horizontal：水平方向排列 vertical：垂直方向排列）
right: 'right',//图标在前文字在后，图例靠右居中显示 （也可以是: left || center || right || 百分比：xx% || xx(默认单位px) ）
y: 'center',//图例y轴居中（也可以是: top || center || bottom || 百分比：xx% || xx(默认单位px) ）
itemStyle: {},//设置图例前面的图标样式
textStyle: {//设置图例文字样式
fontSize: 14
}
},
// 设置主体
series: [
{
name: 'hello world', //echarts图名字
type: 'pie',//echarts 类型
minAngle: 5,//echarts数据value为0时默认为value为5
radius: ['30%', '40%'],//设置环形图 （ radius: ['设置内圆大小', '设置外圆大小'] 不折设置默认为实心圆饼图）
center: ['50%', '50%'],//设置饼图位置 （center:['x轴位置','y轴位置']不设置默认在中间）
data: [ //echarts数据
{ value: 80, name: 'ONE' },
{ value: 50, name: 'TWO' },
{ value: 120, name: 'THREE' },
{ value: 210, name: 'FOUR' },
{ value: 0, name: 'FIVE' }
],
},
]
}
}
},
mounted() {
// 初始化数据的总数
this.option.series[0].data.forEach(v => {
this.echartsSumnum += v.value
})
this.option.title.text = this.echartsSumnum
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
myChart.setOption(this.option);
}
}
</script>
<style scoped lang="less">
#main {
width: 800px;
height: 500px;
}
</style>5.随着legend动态显示数据总数
下面所示代码为全部代码
<template>
<div id="main">
</div>
</template>
<script>
import * as echarts from 'echarts'
export default {
data() {
return {
echartsSumnum: 0,//数据总数
option: {
// 设置标题
title: {
text: '',//主标题 (主标题里面来动态显示当前数据总数)
subtext: '总数',//副标题
x: 'center',//标题x轴居中（也可以是: left || center || right || 百分比：xx% || xx(默认单位px) ）
y: 'center',//标题y轴居中（也可以是: top || center || bottom || 百分比：xx% || xx(默认单位px) ）
itemGap: -5,//主标题和副标题之间的距离(默认为 0)
textStyle: {//设置主标题样式
fontSize: 40,
color: '#666',
backroung: 'blue'
},
subtextStyle: {//设置副标题样式
fontSize: 20,
color: "#666"
}
},
// 鼠标滑过显示悬浮框
tooltip: {
// show:true,//鼠标滑过是否显示悬浮框 （默认为true开启 false为关闭）
//设置悬浮框内展示的内容
// a:series.name b:series.data.name c:series.data.value d:当前数据所占数据的百分比
formatter: '{a}</br>{b}: {c} </br>所占比例: {d}%',
},
// 设置图例
legend: {
orient: 'vertical',//图例的排列方式 （默认 horizontal：水平方向排列 vertical：垂直方向排列）
right: 'right',//图标在前文字在后，图例靠右居中显示 （也可以是: left || center || right || 百分比：xx% || xx(默认单位px) ）
y: 'center',//图例y轴居中（也可以是: top || center || bottom || 百分比：xx% || xx(默认单位px) ）
itemStyle: {},//设置图例前面的图标样式
textStyle: {//设置图例文字样式
fontSize: 14
}
},
// 设置主体
series: [
{
name: 'hello world', //echarts图名字
type: 'pie',//echarts 类型
minAngle: 5,//echarts数据value为0时默认为value为5
radius: ['30%', '40%'],//设置环形图 （ radius: ['设置内圆大小', '设置外圆大小'] 不折设置默认为实心圆饼图）
center: ['50%', '50%'],//设置饼图位置 （center:['x轴位置','y轴位置']不设置默认在中间）
data: [ //echarts数据
{ value: 80, name: 'ONE' },
{ value: 50, name: 'TWO' },
{ value: 120, name: 'THREE' },
{ value: 210, name: 'FOUR' },
{ value: 0, name: 'FIVE' }
],
},
]
}
}
},
mounted() {
// 初始化数据的总数
this.option.series[0].data.forEach(v => {
this.echartsSumnum += v.value
})
this.option.title.text = this.echartsSumnum
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
let echartsArr = []; //点击图例后所剩的数据名
let echartsNum = 0;//点击图例后所剩的数据的总和
// 利用echarts自带的legendselectchanged方法获取点击后的数据(但是这里只能获取到名字)
myChart.on('legendselectchanged', (params) => {
echartsArr = [];//将点击后的数组设为空（每点击一次就重新判断添加）
// 循环点击图例后获取到的名字
for (let key in params.selected) {
// 判断值是否为true 将值为true的名字push到echartsArr数组当中保留起来
if (params.selected[key]) {
echartsArr.push(key)
}
}
echartsNum = 0; //将总数的值设为0（每点击一次就重新计算）
// 循环判断数据的全部数据里的name值是否与我们点击图例后所剩数据的数组相等
// 相等的话就将其value值进行相加得出点击图例后所剩数据的总数
this.option.series[0].data.forEach(item => {
echartsArr.forEach(v => {
if (item.name === v) {
echartsNum += item.value
}
})
})
this.option.title.text = echartsNum //最后将其赋值给主标题即可
this.$nextTick(() => {
myChart.setOption(this.option);
})
})
myChart.setOption(this.option);
}
}
</script>
<style scoped lang="less">
#main {
width: 800px;
height: 500px;
}
</style>有不足的地方还望各位大佬指点一二