前言:同大多数的前端框架一样,先读官网的使用方法。学会基本使用后,在实例中找到自己想要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的简单图表实例就形成了,下面是效果图
原文地址:https://www.cnblogs.com/flower8/p/12204768.html
时间: 2024-09-28 11:45:31