echarrts+axios(vue)绘制柱状图

最新推荐文章于 2024-10-13 14:36:10 发布

On_line.

最新推荐文章于 2024-10-13 14:36:10 发布

阅读量138

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/QUIT_0110/article/details/134139486

版权

echarrts+axios(vue)绘制柱状图

创建vue3项目

 vue create echarts

项目中引入 axios echarts

import axios from 'axios'
import * as echarts from 'echarts'//echarts5.x要求这样引入

vue跨域配置
最后代码

<template>
    <div id="main" style="height: 500px; width: 800px;"></div>
</template>


<script>
import axios from 'axios'
import *  as echarts from 'echarts'

export default {
    data() {
        return {
            chartData: []
        }
    },
    mounted() {
        axios.post('请求路径', {
          
        }).then(res => {
            this.getData(res.data.data);//数据处理
            this.drawpie()//画图
        })
    },
    methods: {
       
        getData(data) {
            //方法处理数据
            })
          
        },
        drawpie() {
            const myecharts = echarts.init(document.getElementById('main'))

            myecharts.setOption({
                tooltip: {
                    trigger: 'item'
                },
                xAxis:{
                    name:'消费额'
                },
                yAxis:{
                    name:'地区',
                    data:this.chartData.map(item=>item.name)
                },
                series:[
                    {
                        type:'bar',
                        data:this.chartData.map(item=>item.value),
                        label:{
                            show:true
                        }
                    }
                ]
               
               
            })
        }

    }
}
</script>