0
点赞
收藏
分享

微信扫一扫

在webpack中使用echarts

可以使用如下命令通过 npm 安装 ECharts

npm install echarts --save

通过 npm 上安装的 ECharts 和 zrender 会放在​​node_modules​​目录下。

可以直接在项目代码中 ​​require('echarts')​​ 得到 ECharts。

在vue项目中的示例代码如下:

<template>
<div id="barChart" style="width:30%;height:400px"></div>
</template>
<script>
import { Message } from 'element-ui'
export default {
name: 'WpVistorStatistic',
components: {

},
data() {
return {

}
},
mounted() {
this.init()
},
methods: {
// 页面初始化
init() {
this.handleQuery()
},
handleQuery() {
var echarts = require('echarts');

// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('barChart'));
// 绘制图表
myChart.setOption({
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
});
}
}
}
</script>
<style scoped>

</style>

即可显示条形图。

 在webpack中使用echarts_Vue

上面的代码的要点为:

1.整个vue文件由template、script和style构成。

2.需要给barChart设置宽高。

3.需要加载echarts,并进行初始化,然后设置图表里面的内容。


举报

相关推荐

0 条评论