EChart 標題 title 樣式，x軸、y軸座標顯示，調整圖表位置等

示例裏工做通常狀況是夠用了，更復雜的能夠查詢教程：

title 官方解說：http://echarts.baidu.com/option.html#title

座標相關： X軸：http://echarts.baidu.com/option.html#xAxis

座標相關： Y軸：http://echarts.baidu.com/option.html#yAxis

表格部分：http://echarts.baidu.com/option.html#grid

<script>
    function getChartsLine() {

        var myChart = echarts.init(document.getElementById('progress'),'macarons');

        var option = {
            title: {
                text: '工程折線圖',      //主標題
                textStyle:{
                    color:'#0DB9F2',        //顏色
                    fontStyle:'normal',     //風格
                    fontWeight:'normal',    //粗細
                    fontFamily:'Microsoft yahei',   //字體
                    fontSize:14,     //大小
                    align:'center'   //水平對齊
                },
                subtext:'副標題',      //副標題
                subtextStyle:{          //對應樣式
                    color:'#F27CDE',
                    fontSize:14
                },
                itemGap:7
            },
            grid:{          //顯示數據的圖表位於當前canvas的座標軸
                x:50,
                y:55,
                x2:50,
                y2:60,
                borderWidth:1
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data:["計劃完成","實際完成"]
            },
            toolbox: {
                show: true,
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis:  {
                type: 'category',
                boundaryGap: false,
                data: ["2015-1", "2015-2", "2015-3", "2015-4", "2015-5", "2015-6", "2015-7", "2015-8", "2015-9", "2015-10", "2015-11", "2015-12"]
            },
            yAxis: {
                type: 'value',

                //默認以千分位顯示，不想用的能夠在這加一段
                axisLabel : {   //調整左側Y軸刻度， 直接按對應數據顯示
                    show:true,
                    showMinLabel:true,
                    showMaxLabel:true,
                    formatter: function (value) {
                        return value;
                    }
                }
            },
            series: [
                {
                    name:"計劃",
                    type:'line',
                    data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 300, 2.3],
                    markPoint: {
                        data: [
                            {type: 'max', name: '最大值'},
                            {type: 'min', name: '最小值'}
                        ]
                    },
                    markLine: {
                        data: [
                            {type: 'average', name: '平均值'},
                            [{
                                symbol: 'none',
                                x: '90%',
                                yAxis: 'max'
                            }, {
                                symbol: 'circle',
                                label: {
                                    normal: {
                                        position: 'start',
                                        formatter: '最大值'
                                    }
                                },
                                type: 'max',
                                name: '最高點'
                            }]
                        ]
                    }
                },
                {
                    name:"實際",
                    type:'line',
                    data:[0, 0, 37, 0, 0, 15, 3036, 5572, 0, 0, 0, 0],
                    markPoint: {
                        data: [
                            {type: 'max', name: '最大值'},
                            {type: 'min', name: '最小值'}
                        ]
                    },
                    markLine: {
                        data: [
                            {type: 'average', name: '平均值'},
                            [{
                                symbol: 'none',
                                x: '90%',
                                yAxis: 'max'
                            }, {
                                symbol: 'circle',
                                label: {
                                    normal: {
                                        position: 'start',
                                        formatter: '最大值'
                                    }
                                },
                                type: 'max',
                                name: '最高點'
                            }]
                        ]
                    }
                }
            ]
        };
        myChart.setOption(option);
    }

    getChartsLine();
</script>

 

修改後：