ECharts配置（一）

lineChart 配置項

var myLineChart = echarts.init(document.getElementById(‘chart-id’));
var ChargeLineChartOption = {
tooltip: {
trigger: ‘axis’，
//formatter 自定義tooltip的顯示（可根據具體條件篩選顯示）
formatter: function(params) {
return params[0].name + ‘

---

’ +
params[0].seriesName + ‘:’ + params[0].value;
}
},
legend: {
show: false,
data: [‘legend1’,’legend2’,’legend3’,’legend4’]
},
//grid設置chart canvas距離外部div的上下左右padding
grid: {
left: ‘3%’,
right: ‘4%’,
bottom: ‘3%’,
containLabel: true
},
xAxis: {
data: [‘1h’, ‘2h’, ‘3h’, ‘4h’, ‘5h’, ‘6h’, ‘7h’, ‘8h’, ‘9h’, ‘10h’, ‘11h’, ‘12h’],
// axisLabel 設置橫座標顯示內容 （即data）
axisLabel: {
textStyle: {
color: ‘#999999’,
fontSize: 26
}
},
axisTick: { //橫座標刻度線
show: false
},
//axisLine 設置橫座標座標軸線
axisLine: {
show: true,
lineStyle: {
color: ‘f39951’,
width: 2,
shadowColor: ‘rgba(0,255,255,0.9)’,
shadowBlur: 5,
shadowOffsetX: -3,
shadowOffsetY: -3
}
}，
// splitLIne 設置橫座標 分隔線 （即 垂直橫座標的對應每個刻度的網格線）
splitLine： {
show: false
}
},
yAxis: {
axisLine: {
show: false,
},
splitLine: { //座標軸分割線
show: true,
lineStyle: {
color: ‘#e3e3e3’
}
},
name: ‘金額(萬元)’, //座標軸名字
nameTextStyle: { //座標軸名字樣式
color: ‘#999999’,
fontSize: 26
},
nameGap: 30, //座標軸名字與下方座標軸線的距離 （可與grid 的 top 配合設置 座標軸名字與座標線的距離）
axisTick: {
show: false
},
minInterval: 1, //最小刻度值（可去掉小數刻度顯示）
axisLabel: {
textStyle: {
color: ‘#999999’,
fontSize: 26
},
margin: 10,
formatter: ‘{value}’
}
},
//dataZoom 可用於數據量多，在可視範圍內無法完全顯示的情況，可使chart左右滑動
dataZoom: [
{
type: ‘inside’, // 隱藏滾動條
start: 0, //初始數據位置 （百分比）
end: 60 , //結束位置 （百分比）
endValue: 8 //結束位置（此時end失效，只顯示8個數據值）
}
],
// series 設置具體的chart數據
series: [
{
name: ‘收費額’, //數據項名字，可用於legend的顯示隱藏
type: ‘line’,
smooth: true, // 是否顯示平滑曲線
symbol: ‘circle’, // 拐點的形狀
symbolSize: 0, // 拐點的大小
showSymbol: true, // 是否顯示拐點 （爲 false 時，只在emphasis 時顯示拐點）
// 設置線條樣式
lineStyle: {
normal: {
width: 5
}
},
//設置拐點樣式
itemStyle: {
normal: {
color: ‘#ff4040’,
borderColor: ‘rgba(255,255,255,0.5)’,
borderWidth: 0

                }
            },
            data: [1,2,3,4,5,6,7,8,9,10,11,12]
        },
        {
            name: '減免額',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 0,
            showSymbol: true,
            lineStyle: {
                normal: {
                    width: 5
                }
            },
            itemStyle: {
                normal: {
                    color: '#00d4fa',
                    borderColor: 'rgba(255,255,255,0.5)',
                    borderWidth: 0

                }
            },
            data: [1,,10,11,122,3,4,5,6,7,8,9]
        },
        {
            name: '同期收費',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 0,
            showSymbol: true,
            lineStyle: {
                normal: {
                    width: 5,
                    type: 'dotted'
                }
            },
            itemStyle: {
                normal: {
                    color: '#ff4040',
                    borderColor: 'rgba(255,255,255,0.5)',
                    borderWidth: 0
                }
            },
            data: [9,10,11,12,1,2,3,4,5,6,7,8]
        },
        {
            name: '同期減免',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 0,
            showSymbol: true,
            lineStyle: {
                normal: {
                    width: 5,
                    type: 'dotted'
                }
            },
            itemStyle: {
                normal: {
                    color: '#00d4fa',
                    borderColor: 'rgba(255,255,255,0.5)',
                    borderWidth: 0
                }
            },
            data: [1,2,3,9,10,11,12,4,5,6,7,8]
        }
    ]
};
ChargeLineChart.setOption(ChargeLineChartOption);