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

无敌的宇宙
无敌的宇宙
擅长邻域:Java,HTML,JavaScript,MySQL,支付,退款,图片上传

分类: vue 专栏: vue 标签: vue实现图表统计折线图柱状图扇形图echarts

2024-01-18 23:02:33 446浏览

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

安装图表插件

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)
                    }

                })
            },

好博客就要一起分享哦!分享海报

此处可发布评论

评论(0展开评论

暂无评论,快来写一下吧

展开评论

您可能感兴趣的博客

客服QQ 1913284695