Vue使用Echarts（入门级）

最终效果：

npm install echarts --save	// 先安装echarts

<template><!-- 创建一个dom区域用于挂载echarts图表 --><div id="chart" style="width: 600px;height:500px;"/>
</template>
<script>
import * as echarts from 'echarts' // 导入echartsexport default {name: 'DataGraph',data() {return {chart: null // 声明一个变量用于存放echarts实例}},mounted() {this.initChart() // echarts初始化创建函数},methods: {initChart() {// 使用echarts.init创建实例，参数为要挂载的dom对象this.chart = echarts.init(document.getElementById('chart'))// echarts相关参数const option = {title: {text: 'ECharts 入门示例'},tooltip: {},legend: {data: ['销量']},xAxis: {data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]}// 对于实例设置上面所配置的参数this.chart.setOption(option)}}
}
</script>
<style scoped>
</style>