vue实现图表统计折线图柱状图扇形图直方图

安装图表插件

npm install --save echarts

main.js

import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts

vue

<div   style=" width:100%; height: 400px;margin-top: 20px;" id="myChart"></div>

front_daySales_list(o).then((res) => {
    dealResult(res.data);
    if(res.data.status==1){
        let li=res.data.obj;
        this.xlli=li;

        let x=[];
        let sellCount=[];
        let collectNum=[];
        for(let i=0;i<li.length;i++){
            x.push(li[i].day);
            sellCount.push(li[i].sellCount);
            collectNum.push(li[i].collectNum);
        }


        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('myChart'))
        // 绘制图表
        myChart.setOption({
            title: { text: '商品销量收藏量走势图' },
            legend:{
                data:[ '销量','收藏量']
            },
            tooltip: {},
            xAxis: {
                data: x
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'line',
                data: sellCount
            },{
                name: '收藏量',
                type: 'line',//line折线图，bar柱状图
                data: collectNum
            } ]
        });


    }else{
        this.$message.error(res.data.msg)
    }

})

    getlevelbi(){
//扇形图
                back_proapp_tjlevel({ year:this.year2}).then((res) => {
                    if(res.data.status==1){
                        let li=res.data.obj;
                        let data=[];
                        for(let i=0;i<li.length;i++){
                            let o={ value: li[i].bi, name: li[i].name };
                            data.push(o);
                        }
                        let that=this;
                        // 基于准备好的dom，初始化echarts实例，
                        const myChart =  this.$echarts.init(document.getElementById('myChart2'))
                        myChart.setOption({
                            title: { text: '' },
                            tooltip: {
                                trigger: 'item',
                                formatter: '{a} <br/>{b} : {c} ({d}%)' // 具体a b c d 代表的属性看下面注释啦
                            },
                            series: [
                                {

                                    name: '比例', // formatter 中的a
                                    type: 'pie',
                                    radius: '50%',
                                    center: ['50%', '50%'],
                                    data: data, // data 中的name为formatter中的 b；data中的value呢就是formatter中c；至于d就是Echarts计算出来的百分比啦；itemStyle:为饼图每个扇形的颜色；label为指示线后面的文字的样式，labelLine为指示线的颜色
                                    label: {
                                        normal: {
                                            show: true,
                                            textStyle: {
                                                fontWeight: 400,
                                                fontSize: 12 // 文字的字体大小
                                            },
                                            formatter: '{b} \n {c}%' // 这里为指示线后面的提示信息，这里的换行要用\n 与上面tooltips中的formatter换行不同滴
                                        }
                                    },
                                    itemStyle: {
                                        emphasis: {
                                            shadowBlur: 10,
                                            shadowOffsetX: 0,
                                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                                        }
                                    }
                                }
                            ]
                        })

                        this.$message.success(res.data.msg)
                    }else{
                        this.$message.error(res.data.msg)
                    }

                })
            },