曲线图
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
}
]
});
}
);
}