echarts 利用富文本设置图片label

最近做前端可视化，有一个如下的需求，放上初步的效果图：

很简单的echart pie图，但是又有两个不同的地方：

• 需求上有2个label,一个在扇形内部，一个在扇形外部
• 外部label为图片
  查看文档最终的解决办法为，同样的数据渲染2个相同的pie图，利用rich将外部label设置为图片

为了使vue组件看起来简洁，将chart 方法抽离到src/utils/chart.js

<template>
  <el-row :gutter="24">
       <el-col :span="8">
        <el-card title>
            <div slot="header" class="clearfix">
              <span>性别</span>
            </div>
            <div id="chart6" style="height:400px"></div>
        </el-card>
       </el-col>
  </el-row>
</template>
import { drawSexPie } from '@/utils/chart'
export default {
    mounted(){
        drawSexPie({id: 'chart6'})
    }
}

chart.js 代码

import Vue from 'vue'
import man from "@/assets/man.png";
import women from "@/assets/women.png";
const v = new Vue()
import echarts from 'echarts'

export const drawSex = (params) => {
    const { id } = params
    let sexChart = echarts.init(document.getElementById( id ));
    sexChart.setOption({
        color: [
            "#67e0e3",
            "#ff9f7f",
            "#32c5e9",
            "#ca8622",
            "#bda29a",
            "#6e7074",
            "#546570",
            "#c4ccd3",
        ],
        tooltip: {
            trigger: "item",
            formatter: "{b} : {c} <br/>占比 : {d}%",
        },

        legend: {
            data: ["女", "男"],
        },
        series: [{
                name: "性别分布",
                type: "pie",
                radius: "55%",
                center: ["50%", "50%"],
                data: [
                    { value: 18770, name: "女" },
                    { value: 39550, name: "男" },
                ],
                label: {
                    position: "inner",
                    formatter: " {c}人\n占比 : {d}%",
                },
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: "rgba(0, 0, 0, 0.5)",
                    },
                },
            },
            {
                name: "性别分布",
                type: "pie",
                radius: "55%",
                center: ["50%", "50%"],
                data: [{
                        value: 18770,
                        name: "女",
                        label: {
                            normal: {
                                show: true,
                                position: "right",
                                distance: 10,
                                rich: {
                                    img1: {
                                        backgroundColor: {
                                            image: women,
                                        },
                                        height: 40
                                    },

                                },
                                formatter: function() {
                                    var res = "";
                                    res += "{img1|}";
                                    return res;
                                },
                                textStyle: {
                                    color: "#ccc",
                                    fontSize: "16",
                                },
                            },
                        },
                    },
                    {
                        value: 39550,
                        name: "男",
                        label: {
                            normal: {
                                show: true,
                                position: "right",
                                distance: 10,
                                rich: {
                                    img1: {
                                        backgroundColor: {
                                            image: man,
                                        },
                                        height: 40
                                    },
                                },
                                formatter: function() {
                                    var res = "";
                                    res += "{img1|}";
                                    return res;
                                },
                                textStyle: {
                                    color: "#ccc",
                                    fontSize: "16",
                                },
                            },
                        },
                    },
                ],
                labelLine: {
                    show: false,
                },
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: "rgba(0, 0, 0, 0.5)",
                    },
                },
            },
        ],
    });
    window.addEventListener("resize", () => {
        sexChart.resize();
    });
}

1、安装echarts 安装包

npm i echarts -S

2、引入依赖并简单封装方法

 import echart from 'echarts'
 export const drawSex = (params) => {
    const { id } = params
    let sexChart = echarts.init(document.getElementById( id ));
    const options = {} //相关配置项目
    sexChart.setOption(options)
    // echarts自适应
     window.addEventListener("resize", () => {
        sexChart.resize();
    });
 }

3、准备容器

  <div id="chart6" style="height:400px"></div>

4、引入方法并在mounted中调用

import { drawSexPie } from '@/utils/chart'
export default {
    mounted(){
        drawSexPie({id: 'chart6'})
    }
}