vue中使用echarts

安装echarts

npm install echarts --save
//或者
npm install echarts -S

在main.js中配置

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

新建一个模块chart.vue,加入代码

const num =100;
    export default {
        name: "chart2",
        data(){
                return{
                    msg:'this is test'
            }
        },
        mounted() {
            this.draw();
        },
        methods:{
            draw(){
                const mychart =this.$echarts.init(document.getElementById('chart2'));
                const option ={
                    tooltip: {
                        formatter: '{a} <br/>{b} : {c}%'
                    },
                    toolbox: {
                        feature: {
                            restore: {},
                            saveAsImage: {}
                        }
                    },
                    series: [
                        {
                            name: '业务指标',
                            type: 'gauge',
                            detail: {formatter: '{value}%'},
                            data: [{value: num, name: '完成率'}]
                        }
                    ]
                }
                mychart.setOption(option)

            }
        }
    }

运行效果如下:
在这里插入图片描述

原文链接:加载失败,请重新获取