标签：mount 注册 har round ima 五步 数据显示 方式 前端
前言：同大多数的前端框架一样，先读官网的使用方法。学会基本使用后，在实例中找到自己想要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的简单图表实例就形成了，下面是效果图
标签：mount 注册 har round ima 五步 数据显示 方式 前端
原文地址：https://www.cnblogs.com/flower8/p/12204768.html
