Echarts统计图标题居中显示

偏执的太偏执、 2022-12-23 00:50 279阅读 0赞

![cf3e53450f5e7984e75494f5af77eedd.png][]

title: {
                            text: '健康人数统计',
                            // subtext:'',
                            x: 'center',
                            y: '7px',
                            textStyle: {
                                color: '#3A7BD5',
                                fontSize: 16
                            },
                            textAlign: 'left'
                        },

<!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <title></title>
            <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
            <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js" type="text/javascript"></script>
        </head>
    
        <body>
            
            <div id="main" class="col-md-12  col-sm-12 col-xs-12" style="height: 400px;"></div>
            <script>
                // 叠堆折线图数据请求
                $.ajax({
                    url: "data.json",
                    data: {},
                    type: 'GET',
                    success: function(data) {
                        aFun(data.echatX, data.echatY, data.echatY2);
                    },
                });
                // 基于准备好的dom，初始化echarts实例
                var aChart = echarts.init(document.getElementById('main'));
                // 指定图表的配置项和数据
                function aFun(x_data, y_data, y2_data) {
                    aChart.setOption({
                        title: {
                            text: '健康人数统计',
                            // subtext:'',
                            x: 'center',
                            y: '7px',
                            textStyle: {
                                color: '#3A7BD5',
                                fontSize: 16
                            },
                            textAlign: 'left'
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        legend: {
                            x: '450px',
                            y: 'right',
                            textStyle: { //图例文字的样式
                                color: '#fff',
                                fontSize: 16
                            },
                            data: ['正常', '异常']
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
    
                        xAxis: {
                            splitLine: {
                                show: false
                            },
                            /* 改变x轴颜色 */
                            axisLine: {
                                lineStyle: {
                                    color: '#00a2e2',
                                    width: 1, // 这里是为了突出显示加上的
                                }
                            },
                            data: x_data,
                        },
    
                        yAxis: {
                            splitLine: {
                                show: false
                            },
                            type: 'value',
                            scale: true,
                            name: '',
                            max: 150,
                            min: 0,
                            splitNumber: 5,
                            // 改变y轴颜色
                            axisLine: {
                                lineStyle: {
                                    color: '#00a2e2',
                                    width: 1, // 这里是为了突出显示加上的
                                }
                            },
                        },
                        series: [{
                                name: '正常',
                                type: 'bar',
                                itemStyle: {
                                    normal: {
                                        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                            offset: 0,
                                            color: "#1362f2" // 0% 处的颜色
                                        }, {
                                            offset: 0.6,
                                            color: "#3278f8" // 60% 处的颜色
                                        }, {
                                            offset: 1,
                                            color: "#5490ff" // 100% 处的颜色
                                        }], false)
                                    }
                                },
                                data: y_data
                            },
    
                            {
                                name: '异常',
                                type: 'bar',
                                
                                itemStyle: {
                                    normal: {
                                        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                            offset: 0,
                                            color: "#e67726" // 0% 处的颜色
                                        }, {
                                            offset: 0.6,
                                            color: "#f48c47" // 60% 处的颜色
                                        }, {
                                            offset: 1,
                                            color: "#fe9d62" // 100% 处的颜色
                                        }], false)
                                    }
                                },
                                data: y2_data
                            }
                        ]
    
                    });
                }
            </script>
        </body>
    </html>

json

{
        "echatX": [
            "2019-07-02",
            "2019-07-03",
            "2019-07-04",
            "2019-07-05",
            "2019-07-06",
            "2019-07-07",
            "2019-07-08",
            "2019-07-09",
           
            "2019-07-15"
        ],
        "echatY": [
            120,121,123,123,125,127,128,129,122
        ],
        "echatY2": [
            60,64,63,63,65,67,68,69,65
        ]
    }

![9c3deda0394e6db4f8c281eb2bbdf8ba.png][]

[cf3e53450f5e7984e75494f5af77eedd.png]: /images/20221120/190237b07c544c91880e72a0ac9f405d.png
[9c3deda0394e6db4f8c281eb2bbdf8ba.png]: /images/20221120/1adaa34dc6844486a14d632440834229.png