可以使用如下命令通过 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>
即可显示条形图。
上面的代码的要点为:
1.整个vue文件由template、script和style构成。
2.需要给barChart设置宽高。
3.需要加载echarts,并进行初始化,然后设置图表里面的内容。