Vue中echarts的基本用法

613人浏览 / 0人评论 / 添加收藏

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

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

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

//1.首先引入

import echarts from "echarts";

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

<!-- 2.为echarts准备一个具备大小的DOM -->
<div id="main" style="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的简单图表实例就形成了，下面是效果图。

全部评论

搜索