echarts配合vue使用,自定义标题图标

echarts配合vue使用

1. 安装引入echarts,在main.js文件中引入

    import echarts from 'echarts';
    Vue.prototype.$echarts = echarts;

2. 初始化

    this.coverageChart = echarts.init(document.getElementById("pieChart"),'infographic')
    this.coverageChart.setOption(option);

3. echart图打开关闭loading效果（必须在init初始化之后调用）

    this.coverageChart.showLoading({
        text: 'Loading...', 
        maskColor: 'rgba(0, 0, 0, 0.7)',
        color: '#ffffff',
        textColor: '#ffffff',
        fontSize: 16,
        // 是否显示旋转动画（spinner）。从 `v4.8.0` 开始支持。
        showSpinner: true,
        // 旋转动画（spinner）的半径。从 `v4.8.0` 开始支持。
        spinnerRadius: 10,
        // 旋转动画（spinner）的线宽。从 `v4.8.0` 开始支持。
        lineWidth: 5
    });//打开loading效果
    this.coverageChart.hideLoading();//关闭loading效果

4. echart图标题title如何自定义添加图标

    setOption({
        title: {
            link:this.sonarUrl,
            target: 'blank',//blank打开新页面，self打开当前页面
            text:'{a|} Coverage rate of the code',
            textStyle: {//主标题文本样式{"fontSize": 18,"fontWeight": "bolder""color": "#333"}
                fontSize: 16,
                lineHeight:20,
                rich: {
                    a: {
                        // 这样设定 backgroundColor 就可以是图片了。
                        align: 'left',
                        backgroundColor: {
                            image: require('@/assets/img/link.png')
                        },
                        // 可以只指定图片的高度，从而图片的宽度根据图片的长宽比自动得到。
                        height: 14
                    }
                }
            },
        },
    })

5. 指定调色盘的范围，色块会按调色盘顺序展示

    setOption({
        color: ['#93CC5A','#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a'],
    })

6. 环形饼图中间始终显示固定值

    setOption({
        graphic:{
            type:"text",
            left:"center",
            top:"120px",
            zlevel:100,
            style:{
                text:sum+"\nTotal",
                fill:"#8ABC58",
                fontSize:"25",
                fontWeight: 'bold',
                textAlign: 'center' ,
            }
        },
        series: [
            {
                name: '',
                type: 'pie',
                radius: ['50%', '70%'],
                avoidLabelOverlap: false,
                label: {
                    normal:{
                        show: false,//取消labelhover显示
                    },
                    emphasis:{
                        show: false,//取消labelhover显示
                    }
                },
                labelLine: {
                    show: false
                },
            }
        ]
    })
    

7. 销毁图标之前需要做判断

    if(this.coverageChart.isDisposed!=undefined){
        this.coverageChart.dispose();
    }