1. 程式人生 > >Echart畫折線圖各標籤講解

Echart畫折線圖各標籤講解

option = {
    title: {
        text: '標籤講解',//圖示標題
        x: 'center'//水平居中
    },
    tooltip: {//提示框資訊
        axisPointer: {
            type: 'cross'
        }
    },
    legend: {//圖例資訊
        data:[ 'A','B','C'],
        top:40//圖例位置(可設定top,bottom,left,right)
    },
    grid: {//圖的位置
        top: 100,
        bottom: 50
}, xAxis: [ //x座標軸資訊 { name : '(下方x軸資料單位)',//座標單位 data: [ "2013", "2014", "2015", "2016"]//座標上數值 },{ name : '(上方x軸資料單位)', data: [ "2013", "2014", "2015", "2016"] } ], yAxis: [//y座標軸資訊 { name : '(y軸資料單位)'
,//座標單位 type: 'value', min:600,//座標起始值 max:1800 //座標最大值 } ], series: [ {//A曲線 name:'A', type:'line', itemStyle:{ normal:{ color: "#d14a61" } //座標圓點的顏色 }, lineStyle:{ normal
:{ width:4,color: "#d14a61" }//線條的顏色及寬度 }, label: {//線條上的數字提示資訊 normal: { show: true, position: 'top' } }, smooth: true,//線條平滑 data: [1180,1244,1207,1276] }, { name:'B', type:'line', itemStyle:{ normal:{ color: "#5793f3" } }, lineStyle:{ normal:{width:4, color: "#5793f3" } }, label: { normal: { show: true, position: 'bottom' } }, smooth: true, data: [1074,1448,1125,1570] },{ name:'C', type:'line', xAxisIndex: 1, itemStyle:{ normal:{ color: "#675bba" } }, lineStyle:{ normal:{width:4, color: "#675bba" } }, label: { normal: { show: true, position: 'bottom' } }, smooth: true, data: [887,997,854,711] } ] };