目录

1.安装echarts

2.引入echarts

3.创建要放入echarts实例的一个盒子

 4.创建echarts实例

5.随着legend动态显示数据总数

---

效果视频

1.安装echarts

npm install echarts --save

2.引入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>

有不足的地方还望各位大佬指点一二