步骤"/>
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. 获取数据之后的图标
更多推荐
Vue使用Echarts的一个简单步骤
发布评论