echarts系列 --- 【vue+echarts实现折线面积图、饼图、柱状图】

<template>
  <div>
      <!-- 折现面积图 -->
      <div id="barEchart" style="height:450px;width:300px"></div>
      <!-- 饼图 -->
      <div id="cirEchart" style="height:450px;width:300px"></div>
  </div>
</template>

<script>
import {getEchartApi} from "@/api/xxx" // 请求的api
export default {
    data(){
        return{

        }
    },
    methods:{
        // 请求echarts数据
        async getEchartData(){
            let params = {} // 参数
            let res = await getEchartApi(params)
            if(res && res.data && res.code === 200){
                // 调取折现面积图方法, 把请过来的折现面积图数据传走,一系列操作可以在方法内处理
                this.getBarEchart(res.data.barData)
                // 调取饼图方法
                this.getCirEchart(res.data.cirData)
            }
        },

        // 折现面积图数据
        getBarEchart(data){
            let chartDom = document.getElementById("barEchart") // 获取节点
            // 再重新获取一下,防止没有获取到节点报错
            var timer = setInterval(()=>{
                chartDom = document.getElementById("barEchart") // 获取节点
                if(!chartDom){
                    return false
                }else{
                    let myChart = echarts.init(chartDom); // echarts初始化
                    let unit = '%' // 百分单位
                    // 先处理传过来的数据,分别取出x轴 y轴的数据放在两个不同数组中 然后赋值
                    let xData = data.xxxx //x轴数据
                    let yData = data.xxxxx //y轴数据
                    let option = {
                        backgroundColor:'#f1f1f1', // 背景颜色
                        // 悬浮提示框
                        tooltip:{
                            trigger:'axis',
                            confine:true, // 将tooltip框限制再图表的区域内
                            axisPointer:{
                                type:'none', // cross表示指示线，none取消指示线
                                crossStyle:{color:'#999'} // 指示线样式
                            },
                            formatter:('{b}</br>{a}:{c}' + unit),
                        },
                        // 图例配置
                        legend:{
                            data:['数据获取率'], //多个图例可以设置动态的
                            icon:'circle', // 图例的icon
                            left: 'center',
                            bottom:10
                        },
                        // x轴配置
                        xAxis: {
                            type: 'category',
                            splitLine:{show:false},
                            boundaryGap:false,
                            // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                            data:xData, // x轴数据
                            // 设置x轴样式
                            triggerEvent:true,
                            axisLabel:{
                                rotate:30, // 字体倾斜
                                textStyle:{
                                    color:'#333',
                                    fontSize:14
                                },
                                // 坐标轴与刻度线对齐
                                // axisTickL:{
                                //     alignWithLabel:true
                                // }
                                // 设置x轴显示字体个数
                                // formatter:function(xData){
                                //     let newAxi
                                //     后补
                                // }

                            }
                        },
                        // y轴配置
                        yAxis: {
                            type: 'value',
                            name:'数据获取率',
                            splitLine:{show:false}, // 取消图标中的横线
                            min:0,
                            max:10, // 可以再函数外取出返回数据的最大值
                            splitNumber:5,
                            interval:(10)/splitNumber,
                            position:'left',
                            axisLine:{
                                show:true // 控制y轴显示线
                            },
                            // 设置y轴字体样式
                             axisLabel:{
                                textStyle:{
                                    color:'#333',
                                    fontSize:14
                                },
                                // 设置y轴数拼上单位
                                formatter:('{value} + unit') // y轴拼接单位

                            }
                        },
                        series: [
                            {   name:'数据获取率',
                                // data: [120, 200, 150, 80, 70, 110, 130],
                                data: yData,
                                type: 'line', // 柱状图时bar 折现图是line
　　　　　　　　　　　　　　　　　　　// 设置面积阴影部分
                                areaStyle:{
                                    normal:{
                                        color:'#f47920'
                                    }
                                },
                                // yAxisIndex:1,
                                // SymbolSize:30, // 配置折现点大小
                                itemStyle:{
                                    normal:{
                                        // 配置折现点颜色
                                        color:"#f47920",
                                        // 配置折现颜色
                                        lineStyle:{
                                            color:"#f47920"
                                        }
                                    }
                                }
                            }
                        ]

                    };
                    if(option){
                        myChart.setOption(option)
                    }
                    window.addEventListener('resize',function(){
                        myChart.resize()
                    })
                   
                }
            })

           


        },
        // 饼图数据
        getCirEchart(data){
            // 先处理传来的数据，需要转化成键值对形式的 键必须有name,value
            //  比如以下方法的处理
            let newArr = data.map((item,i)=>{
                return{
                    name:item.xxxx,
                    value:item.xxxx,

                }
            })

            // 二次处理数据,获取每条数据的name,组成一个数组,展示图例
            let newArrName = []
            data.forEach(item => {
                newArrName.push(item.name)
            });
            let chartDom = document.getElementById("cirEchart") // 获取节点
            // 再重新获取一下,防止没有获取到节点报错
            var timer = setInterval(()=>{
                chartDom = document.getElementById("cirEchart") // 获取节点
                if(!chartDom){
                    return false
                }else{
                    let myChart = echarts.init(chartDom); // echarts初始化
                    let option = {
                        // backgroundColor:'#f1f1f1', // 背景颜色
                        title:{
                            top:0,
                            text:'年龄区间',
                            left:'left',
                            left:50
                        },
                        // 悬浮提示框
                        tooltip:{
                            show:true,
                            trigger:'item',
                            confine:true, // 将tooltip框限制再图表的区域内
                            axisPointer:{
                                type:'none', // cross表示指示线，none取消指示线
                                crossStyle:{color:'#999'} // 指示线样式
                            },
                            formatter:function(v){
                                let text=v.data.name;
                                let value=v.data.value;
                                return `\n${text}</br>人次:&nbsp${value}`
                            }
                        },
                        // 图例配置
                        legend:{
                            data:newArrName, //多个图例可以设置动态的
                            icon:'circle', // 图例的icon
                            left: 'center',
                            bottom:10,
                            width:20
                        },
                        avoidlabelOverlap:true,
                        series: [
                            {  
                                data: newArr,
                                type: 'pie', // 柱状图时bar 折现图是line
                                radius:"50%",
                                center:['50%','50%'],
                                label:{
                                    normal:{
                                        show:true,
                                        position:'inner',
                                        formatter:function(params){
                                            return params.data.name
                                        },
                                    }
                                },
                                emphasis:{
                                    itemStyle:{
                                        shadowBlur:10,
                                        shadowOffsetX:0,
                                        ShadowColor:'rgba(0,0,0,0.5)'
                                    }
                                },
                                itemStyle:{
                                    normal:{
                                       color:function(params){
                                           var colorList = [
                                               '#fa8f42','12bf16'
                                           ]
                                           return colorList[params.dataIndex]

                                       }
                                    }
                                }
                            }
                        ]

                    };
                    if(option){
                        myChart.setOption(option)
                    }
                    window.addEventListener('resize',function(){
                        myChart.resize()
                    })
                   
                }
            })

        }
    }
}
</script>

<style>

</style>