2022-07-12 ECharts的基本使用

需求：统计数据使用柱形图、饼图展示（数量需要显示）

实现：Apache ECharts 管网

 html中需要先定义一个有宽高的div，用来展示图表

<!-- 为 ECharts 准备一个定义了宽高的 DOM，必须定义宽高才可以显示 -->
<div style="width: 100%;height: 400px;" id="demo"></div>

1.柱形图.js（在柱子顶部显示数量）

    var xData = [];
    var yData = [];
    $.post(Feng.ctxPath+ "/data/getDemoData",
        result => {
            result.data.forEach((item) =>{
                xData.push(item.name)
                yData.push(item.userCount)
            })
            $(function () {
                var option = {
                    xAxis: {
                        name: '名称',
                        type: 'category',
                        data: xData
                    },
                    yAxis: {
                        name: '次数',
                        type: 'value'
                    },
                    series: [
                        {
                            data: yData,
                            type: 'bar'  //柱状图
                            ,itemStyle: {    //标签展示样式
                                normal: {
                                    label: {
                                        show: true
                                        , position: 'top'
                                        , textStyle: { color: '#615a5a' }
                                        , formatter:function(params){
                                            if(params.value==0){
                                                return '';
                                            }else {
                                                return params.value;
                                            }
                                        }
                                    }
                                }
                                },
                        }
                    ]
                };

                var myChart = echarts.init(document.getElementById('demo'));
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            })
        })

2.饼图.js

var demoData= [];//存放要展示数据
    $.post(Feng.ctxPath+ "/demo/getDemoData",    //请求数据
        result => {
            result.data.forEach((item) =>{
                demoData.push(item)
            })
            $(function () {
                var option = {
                    legend: {    //图例组件
                        show: false    //不显示
                    },
                    series: [
                        {
                            type: 'pie', //饼图
                            radius: [50, 100],    //饼图的半径
                            center: ['50%', '50%'],    //饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。
                            roseType: 'area',    //展示成南丁格尔图，通过半径区分数据大小。(所有扇区圆心角相同，仅通过半径展现数据大小)
                            itemStyle: {    //用于指定饼图扇形区块的内外圆角半径
                                borderRadius: 8
                            },
                            label: {
                                alignTo: 'edge',    //标签的对齐方式,文字对齐
                                formatter: '{name|{b}}\n{value|{c} 次}',    //标签展示样式        
                                minMargin: 5,
                                edgeDistance: 10,
                                lineHeight: 15, //行高
                                rich: {
                                    time: {
                                        fontSize: 10,
                                        color: '#999'
                                    }
                                }
                            },
                            labelLine: {
                                length: 15,
                                length2: 0,
                                maxSurfaceAngle: 80
                            },
                            data: demoData  //数据
                        }
                    ]
                };

                var myChart = echarts.init(document.getElementById('demo'););
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            })
        })

参考文章：echarts a,b,c,d 分别表示跟用法

关于formatter的转换，官网中是配置项手册-series-bar.label. formatter：{a},{b},{c},{d}

折线（区域）图、柱状（条形）图: a（系列名称），b（类目值），c（数值）, d（无） 
 
散点图（气泡）图 : a（系列名称），b（数据名称），c（数值数组）, d（无） 
 
饼图、雷达图 : a（系列名称），b（数据项名称），c（数值）, d（百分比） 
 
弦图 : a（系列名称），b（项1名称），c（项1-项2值），d（项2名称)， e(项2-项1值)

{a}        系列名称        series的name

{b}        数据项名称        data的name

{c}        数值        data的value

{d}        百分比        data的value占比