折线图表 html模板,折线图.html

折线图

.demo {

margin: 50px auto;

width: 600px;

height: 300px;

}

var category3 = ['0-2', '2-4', '4-6', '6-8', '8-10', '10-12', '12-14', '14-16', '16-18', '18-20', '20-22', '22-24'];

var main3 = new HxChartLine('main3', category3);

main3.init();

main3.option.xAxis.axisTick = {

interval: 0,

alignWithLabel: true

};

main3.option.xAxis.axisLabel.interval = 0;

main3.option.yAxis.splitLine = {

lineStyle: {

type: 'dashed'

}

};

main3.option.xAxis.boundaryGap = true;

main3.option.xAxis.axisLabel.rotate = 30;

main3.putData('困人时间段统计', 9)

main3.putData('困人时间段统计', 8)

main3.putData('困人时间段统计', 15)

main3.putData('困人时间段统计', 5)

main3.putData('困人时间段统计', 1)

main3.putData('困人时间段统计', 6)

main3.putData('困人时间段统计', 8)

main3.trim();

main3.option.series[0].areaStyle = {

color: {

type: 'linear',

x: 0,

y: 0,

x2: 0,

y2: 1,

colorStops: [{

offset: 0, color: '#ff9600' // 0% 处的颜色

}, {

offset: 1, color: '#ff960000' // 100% 处的颜色

}],

global: false // 缺省为 false

}

};

main3.option.series[0].itemStyle = {

color: '#df8300'

}

main3.option.grid.top = 30;

main3.option.grid.left = 10;

main3.option.yAxis.name = '单位:百分比'

main3.init();

一键复制

编辑

Web IDE

原始数据

按行查看

历史