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);