Vue使用Echarts的一个简单步骤

步骤"/>

Vue使用Echarts的一个简单步骤

1.安装

npm install echarts

2.准备一个容器即你想哪里展示这个图片

    <el-card style="margin-top: 20px"><!-- 为 ECharts 准备一个定义了宽高的 DOM --><div id="main" style="width: 600px;height:400px;"></div></el-card>

3.在你想用的Vue文件中引入

<script>
// 注意： 按照官网的方法import echarts from 'echarts' 会报错
// 安装如下的方法引入就不会报错了，应该是版本的原因
// 这里参考了    这篇文章
import * as echarts from 'echarts'
</script>

4.使用，注意在mounted周期函数中使用，这是因为需要等待Dom挂在完毕

  mounted() {//1. 用你准备好的dom，初始化echarts实例const myChart = echarts.init(document.getElementById('main'));//2. 指定图表的配置项和数据let option = {title: {text: 'ECharts 入门示例'},tooltip: {},legend: {data: ['销量']},xAxis: {data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]};//3. 使用刚指定的配置项和数据显示图表。myChart.setOption(option);},

5.效果如下

6.从后端获取数据重新渲染，这里获取数据方法最好也写在mounted中

  data() {return {myChartData: {name: '',xAxisData: '',seriesData: ''}};},  async mounted() {const res = await getGoodsGroupCount()if (res.status !== 200) return this.$message.error(res.msg)this.myChartData.name = res.data.namethis.myChartData.xAxisData = res.data.xAxisthis.myChartData.seriesData = res.data.series_dataconsole.log(this.myChartData)// 基于准备好的dom，初始化echarts实例const myChart = echarts.init(document.getElementById('main'));// 指定图表的配置项和数据let option = {title: {text: 'ECharts 入门示例'},tooltip: {},legend: {data: this.myChartData.name},xAxis: {data: this.myChartData.xAxisData},yAxis: {},series: [{name: this.myChartData.name,type: 'bar',data: this.myChartData.seriesData}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);},

 7. 获取数据之后的图标