一、echarts在vue项目的使用
首先安装echarts依赖包
npm install echarts -S
当然如果你安装了淘宝镜像,你也可以使用淘宝镜像安装,速度会更快一些
cnpm install echarts -S
其次引入echarts到项目中
本文以vue项目为例子:在项目的main.js文件中
// 引入echarts
import echarts
from
'
echarts
';
// 把echarts注册到vue的原型上,方便在组件直接通过this.$echarts来使用
Vue.prototype.$echarts
= echarts;
然后在vue项目使用组件中: 如我的项目中productQuery.vue组件使用echarts
<!-- 绘画柱状图 继承父容器的大小 可以是百分比--> 方式一
<
div
id
=
"
myChart
"
:style
=
"{width:
'
100%
', height:
'
86%
'}
"></
div>
<!-- 绘画柱状图 大小固定,写死 --> 方式二
<
div
id
=
"
myChart
"
:style
=
"{width:
'
300px
', height:
'
300px
'}
"></
div>
二、echarts各参数的详细配置说明(各参数并非必须配置,看项目需求进行配置)
drawing()方法为绘画方法,通常在后端返回数据回调里再调用此方法,因为数据乃是异步获取的,在created或者mounted钩子里调用可能数据还没有拿到。
// 绘画柱状图
drawing() {
// 基于准备好的dom (上文的productQuery.vue组件的DOM),初始化echarts实例
let
myChart
=