echarts配合vue使用

  1. 安装引入echarts,在main.js文件中引入
    import echarts from 'echarts';
    Vue.prototype.$echarts = echarts;
  1. 初始化
    this.coverageChart = echarts.init(document.getElementById("pieChart"),'infographic')
    this.coverageChart.setOption(option);
  1. 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效果
  1. 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
                    }
                }
            },
        },
    })
  1. 指定调色盘的范围,色块会按调色盘顺序展示
    setOption({
        color: ['#93CC5A','#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a'],
    })
  1. 环形饼图中间始终显示固定值
    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
                },
            }
        ]
    })
    
  1. 销毁图标之前需要做判断
    if(this.coverageChart.isDisposed!=undefined){
        this.coverageChart.dispose();
    }
Logo

前往低代码交流专区

更多推荐