vue中使用Echarts饼图(环状图)

在项目中步骤:

<div id="pieChart" class="chart-container"></div>

created () {
      this.initEchart()
},
methods: {
    initEchart () {
        axios.get('/echart').then((res) =>  {
            let echartData = res.data;
            this.$nextTick(() => {
                let pieEchart = document.getElementById('pieChart');
                let pieEcharts =  Echarts.init(pieEchart);
                let option = {  }
                pieEcharts.setOption(option)
                // 如果需要点击圆环触发事件
                pieEcharts.on('click', function(param) {
                    let typeName = param.name
                    switch (typeName) {
                    case '男':
                        location.href = `gender?sex=1`
                        break
                    case '女':
                        location.href = `gender?sex=2`
                        break                        
                });
            })
        }).catch((error) => {
            console.log(error);
        })
    }
},

循环

<div v-for="(items,index) in pieArr"  :key="index">
    <div :id="'pie'+index" class="chart-container"></div>
</div>

data() {
    return {
      pieArr: []
    }
},
created () {
      this.initEchart()
},
methods: {
    initEchart () {
        axios.get('/echart').then((res) =>  {
            this.pieArr = res.data;            
            this.$nextTick(() => {
                for (let i = 0, len = this.pieArr.length; i < len; i++) {
                    let pieEchart = document.getElementById('pieChart'+i);
                    let pieEcharts =  Echarts.init(pieEchart);
                    let option = {  }
                    pieEcharts.setOption(option)
                }                
            })
        }).catch((error) => {
            console.log(error);
        })
    }
},

配置

以下配置以循环数据为例

一、标题 (title)

官方链接: https://echarts.baidu.com/option.html#title
标题如果无特殊要求，可按以下配置。
我的需求是副标题其中有个不定长的显示值和其他部分颜色不同，要突出显示，所以我在echarts外面使用标签加好样式后，定位在了相应位置。

title: {
    // 默认为true，false隐藏
    show:true,
    // 主标题名称，'\n'指定换行
    text: res.data[i].name,
    // 主标题跳转链接，书写路由path路径，后面拼接参数
    link: `page?id=${res.data[i].id}`,
    // 本窗口打开,可设置为'self'，'blank'新窗口打开
    target: "self",
    // 主标题样式
    textStyle: {
        fontSize: 14,
        fontWeight: 'bold'
    },
    // 副标题
    subtext: '',
    // 副标题跳转链接
    sublink: '',
    // 副标题打开方式
    subtarget: null,
    // 副标题样式
    subtextStyle: {
        fontSize: 12
    },
    // 对齐方式，可设置为'left','center','right'
    textAlign: null,
    // 水平位置，默认'left',可设置为'left','center','right',number(px)
    x:'left',
    // 垂直位置，默认'top',可设置为'top','center','bottom',number(px)
    y: 'top',
    // 标题内边距，单位px
    padding: 5,
    // 主副标题纵向间隔，单位px
    itemGap: 10,        
},

二、悬浮提示框 (tooltip)

官方链接:  https://echarts.baidu.com/option.html#tooltip

tooltip: {
    trigger: 'item',
    formatter: "{a} <br/>{b}: {c} ({d}%)"
},

三、图例 (legend)

官方链接:  https://echarts.baidu.com/option.html#legend

legend: {
    // 取消图例上的点击事件，这个看需求
    selectedMode: false,
    // 分布方式，水平：'horizontal'，垂直：'vertical'
    orient: 'vertical',
    // 水平对齐方式，可设置为'left','center','right',number(px)
    x: 'left',
    // 垂直对齐方式，可设置为'top','center','bottom',number(px)
    y: 'top',
    // 距顶部的距离，其他同理
    top: '60%',
    // 距左边的距离，其他同理
    left: '60%',
    // 图标大小,宽和高
    itemWidth: 12,
    itemHeight: 12,
    // 显示内容
    data: ['男' ,'女'],
    // 如需自定义添加内容，可在series的data定义相应的数据，最后返回处理后的内容
    formatter:  (name) => {
        let res = "";
        for(var i = 0; i < option.series[0].data.length; i++) {
            if (option.series[0].data[i].name == name) {
            res = option.series[0].data[i].value;
            }
        }
        return name + ' ' + res;
    }
},

 如果想要分别在不同的位置来显示:

legend: [
    {
        orient: 'vertical',
        x: 'left',
        top: '40%',
        left: '60%',
        data: ['男'],
        formatter:  function(name){
            let res = "";
            for(var i = 0; i < option.series[0].data.length; i++) {
                if (option.series[0].data[i].name == name) {
                    res = option.series[0].data[i].value;
                }
            }
            return name + ' ' + res;
        }
    },
    {
        orient: 'vertical',
        x: 'left',
        top: '60%',
        left: '60%',
        data: ['女'],
        formatter:  function(name){
            let res = "";
            for(var i = 0; i < option.series[0].data.length; i++) {
                if (option.series[0].data[i].name == name) {
                    res = option.series[0].data[i].value;
                }
            }
            return name + ' ' + res;
        }
    },
],

 四、自定义显示文字 (graphic)

官方链接: https://echarts.baidu.com/option.html#graphic

可在任意位置放任意多个

graphic:[
    {
        type:'text',
        left:'50%',
        top:'40%',
        style:{
            text: res.data[i].name,
            textAlign:'center',
            fill:'#333',
            font: '20px Microsoft YaHei',
            width:30,
            height:30
        },
        cursor: 'default'
    },
    {
        type:'text',
        left:'50%',
        top:'60%',
        style:{
            text: res.data[i].age,
            textAlign:'center',
            fill:'#333',
            font: '20px Microsoft YaHei',
            width:30,
            height:30
        },
        cursor: 'default'
    },
],

五、保存图片 (toolbox)

官方链接: https://echarts.baidu.com/option.html#toolbox

// 全部使用默认即可
toolbox: {
  feature: {
    saveAsImage: {}
  }
},

 

六、图表 (series)

官方链接: https://echarts.baidu.com/option.html#series

series: [
    {
        name: '',
        // 图标类型，饼图
        type: 'pie',
        // 环形大小
        radius: ['45%', '50%'],
        // 圆环位置
        center: ['30%', '60%'],
        // 防止标签重叠
        avoidLabelOverlap: true,
        itemStyle : {
            normal : {
                //隐藏标示文字
                label : {
                    show : false   
                },
                //隐藏标示线
                labelLine : {
                    show : false   
                }
            }
        },
        // 数据
        data: [
            {
                value: res.data[i].male,
                name: '男',
            },
            {
                value: res.data[i].female,
                name: '女',
            },            
        ],
        // 图表显示颜色
        color: ['#4B96E8','#FAB737'],
    }
]

问题

如果图表位置不是居中的，某些自定义的文字相对于圆环的位置也会偏移，动态计算显示某些文字的位置

let size;
if(!size)document.body.offsetWidth > 1500 ? size = 0.23 : size = 0.21
if(!this.boxWidth) this.boxWidth = pieEchart.offsetWidth * size;

批示:最近使用echart做项目中的数据展示, 看到这篇文章还不错, 转载记录一下

转自:https://www.jianshu.com/p/812a6f835973