vue-echarts使用的坑
因为最近需要在vue项目中使用过Echarts,我在网上浏览过很多在vue项目中使用过Echarts的文章,很多文章都建议使用vue-Echarts,但是我发现在项目中引入vue-Echarts时项目编译总是报错,如下:
引入方式一:
import ECharts from 'vue-echarts/components/ECharts'
报错:
引入方式二:
import echarts from 'vue-echarts'
报错:
按提示npm install --save @vue/composition-api之后没有报错了,但是发现按下面的方式进行使用的时候并页面并没有任何效果
<template>
<v-chart :options="polar"/>
</template>
<style>
/**
* 默认尺寸为 600px×400px,如果想让图表响应尺寸变化,可以像下面这样
* 把尺寸设为百分比值(同时请记得为容器设置尺寸)。
*/
.echarts {
width: 100%;
height: 100%;
}
</style>
<script>
import ECharts from 'vue-echarts'
import 'echarts/lib/chart/line' //绘制不同的图表要引入不同的chart和component
import 'echarts/lib/component/polar'
export default {
components: {
'v-chart': ECharts
},
data () {
return {
polar: {
// 指定图表的配置项和数据
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}]
}
}
}
}
</script>
网上说vue-echarts和echarts的效果是一样,只是vue-echarts是针对vue封装过的,更方便使用:
- vue-echarts是封装后的vue插件, 基于 ECharts
v4.0.1
+ 开发,依赖 Vue.jsv2.2.6
+,功能一样的只是把它封装成vue插件 这样更方便以vue的方式去使用它。 - echarts就是普通的js库
在 vue-echarts用不了的时候,我决定直接使用echarts,用了之后发现其实也不会太过于麻烦。
Echarts使用方式
Echarts官网https://echarts.apache.org/examples/zh/index.html#chart-type-line
官网里面有很多的例子以及API和配置项说明,看了大概都能画出想要的图表。
1、安装插件
npm install echarts --save
2、vue文件中引入并调用
import * as echarts from 'echarts';
这里特意说明一下为什么要用 import * as xxx from ‘xxx’
原因:echarts就是一个普通的js库,用这种引入方式,接下来方便调用echarts里面的方法
import * as xxx from ‘xxx’: 会将若干export导出的内容组合成一个对象返回
import xxx from ‘xxx’:(export default Din)只会导出这个默认的对象作为一个对象
3、组件中使用
<template>
<div class="sales-data">
<!-- 折线图容器 -->
<div id="line1" style="width:50%;height:400px;"></div>
</div>
</template>
<script>
import * as echarts from 'echarts'
export default {
data () {
return {
myChart1: '',
// 折线图配置
lineOptions: {
title: {
text: '支付金额(元)',
textStyle: {
fontWeight: 'normal',
fontSize: 16
}
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['今日', '昨日']
},
grid: {
left: '0%',
right: '30',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
axisLabel: {
fontSize: 10
},
data: ['06-01', '06-02', '06-03', '06-04', '06-05', '06-06', '06-07']
},
yAxis: {
type: 'value'
},
series: [
{
name: '今日',
type: 'line',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '昨日',
type: 'line',
data: [220, 182, 191, 234, 290, 330, 310]
}
]
},
}
},
mounted () {
this.$nextTick(() => {
this.drawLine()
})
window.addEventListener('resize', () => {
// 窗口变化时重绘折线图
this.myChart1.resize()
})
},
methods: {
//折线图
drawLine () {
// 获取折线图节点
this.myChart1 = echarts.init(document.getElementById('line1'))
// 设置图表数据
this.myChart1.setOption(this.lineOptions)
},
}
}
</script>
lineOptions的参数配置官网都有,这里就不详细说明了,这种方法亲测可用。
效果图: