Vue中echarts的基本用法

Posted 2021-03-15 flower8

前言：同大多数的前端框架一样，先读官网的使用方法。学会基本使用后，在实例中找到自己想要demo。拿过来改一改，一个echarts图表就形成，毕竟人家做就是为了方便使用。

我是在vue中下面直接使用的echarts。下面按步骤讲解。

第一步：安装echarts依赖包，然后引入，注意最好在当前使用的组件中引入，而不需要在main.js中注册。

//1.首先引入
import echarts from "echarts";

第二步：在页面中创建一个盒子，用来装载图表

<!-- 2.为echarts准备一个具备大小的DOM -->
<div id="main" style="width:400px;height:350px;backgroundColor:‘pink‘"></div>

第三步：在js中初始化实例，这里我写到vue组件的mounted钩子函数中了

// 3.基于准备好的dom，初始化echarts实例
 var myChart = echarts.init(document.getElementById("main"));

第四步：也是最重要的一步，将所找到的demo的options放在本组件的data中。echarts的渲染主要是因为options指定的方式不同

//第四步
        option : {
            title: {
                text: ‘缺陷统计‘,
                // subtext: ‘纯属虚构‘,
                left: ‘center‘
            },
            tooltip: {
                trigger: ‘item‘,
                formatter: ‘{a} <br/>{b} : {c} ({d}%)‘
            },
            color:[‘green‘, ‘orange‘,‘pink‘,‘#010101‘],
            legend: {
                orient: ‘vertical‘,
                left: ‘left‘,
                data: [‘无缺陷‘,‘一般缺陷‘, ‘严重缺陷‘, ‘危急缺陷‘]
            },
            series: [
                {
                    name: ‘访问来源‘,
                    type: ‘pie‘,
                    radius: ‘55%‘,
                    center: [‘50%‘, ‘60%‘],
                    data: [
                        {value: 833, name: ‘无缺陷‘},
                        {value: 335, name: ‘一般缺陷‘},
                        {value: 80, name: ‘严重缺陷‘},
                        {value: 9, name: ‘危急缺陷‘},
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: ‘rgba(0, 0, 0, 0.5)‘
                        }
                    }
                }
            ]
        },

第五步：最后一步。还是在mounted函数中，将刚才的options设置到声明的实例中。

//5.使用刚指定的配置项和数据显示图表。
myChart.setOption(this.option);

这样，一个echarts的简单图表实例就形成了，下面是效果图