HTML:
<div class="zxt" style="width:100%;height:100%;"><div id="main" style="width:100%;height:100%;border:0px solid #ccc;padding:0;"></div></div>
JS:
<script src="js/echarts.js"></script>
arrtext = ["03", "04", "05", "06", "07", "08", "09"],arrvalue = [0, 1, 0, 0, 0, 4, 3]
CreateLine(arrtext, arrvalue, 'main', '#b2b2b2');
function CreateLine(text,value,id,backcolor) {
require.config({
paths: {
echarts: './js'
}
});
require(
[
'echarts',
'echarts/chart/line'
],
function (ec) {
//--- 折柱 ---
var myChart = ec.init(document.getElementById(id));
myChart.setOption({
tooltip: {
trigger: 'axis'
},
backgroundColor: backcolor,
//animation:true,
toolbox: {
show: false,
feature: {
mark: { show: false },
dataView: { show: false, readOnly: false },
magicType: { show: true, type: ['line', 'bar'] },
restore: { show: false },
saveAsImage: { show: false }
}
},
grid: {
x: 25,
y: 30,
x2: 30,
y2: 20,
borderWidth:0,
//borderColor:'#ff0000',
},
//calculable : true,
xAxis: [
{
type: 'category',
name: '时间',
axisLine: { // 轴线
show: true,
lineStyle: {
color: '#656668',
type: 'solid',
width: 0
}
},
axisTick: { // 轴标记
show: false,
length: 10,
lineStyle: {
color: '#656668',
type: 'solid',
width: 1
}
},
axisLabel: {
show: true,
interval: 'auto', // {number}
//rotate: 45,
margin: 8,
//formatter: '{value}月',
textStyle: {
color: '#ffffff',
fontFamily: 'sans-serif',
fontSize: 10,
fontStyle: 'italic',
//fontWeight: 'bold'
}
},
splitLine: {
show: false,
lineStyle: {
color: '#656668',
type: 'solid',
width: 1
}
},
data: text,
}
],
yAxis: [
{
type: 'value',
name: '浏览量',
axisLine: { // 轴线
show: true,
lineStyle: {
color: '#656668',
type: 'solid',
width: 1
}
},
axisLabel: {
show: true,
interval: 'auto', // {number}
//rotate: 45,
margin: 8,
//formatter: '{value}月',
textStyle: {
color: '#ffffff',
fontFamily: 'sans-serif',
fontSize: 10,
fontStyle: 'italic',
//fontWeight: 'bold'
}
},
splitLine: {
show: true,
lineStyle: {
color: '#656668',
type: 'solid',
width: 1
}
},
}
],
series: [
{
name: '浏览量',
type: 'line',
itemStyle: {
normal: {
lineStyle: { // 系列级个性化折线样式，横向渐变描边
width: 2,
color: (function () {
var zrColor = require('zrender/tool/color');
return zrColor.getLinearGradient(
0, 0, 1000, 0,
[[0, 'rgba(255,0,0,0.8)'], [0.8, 'rgba(255,255,0,0.8)']]
)
})(),
shadowColor: 'rgba(0,0,0,0.5)',
shadowBlur: 10,
shadowOffsetX: 8,
shadowOffsetY: 8
}
},
emphasis: {
label: { show: true }
}
},
data: value
}
]
});
}
);
}
