说明：
需要注意的是你如果使用百度的echart这个js模块来开发可视化数据，首先需要的就是你需要提供对应的数据。
这一段内容是我在仿别人网站的过程中需要的，到最后我依旧没有用php搞出来我需要的数组数据。最后不了了之了，就当做一次笔记吧，暂时不考虑别的了。
其中，xAxis 里面的data 数组对应的是数组的key，解释为时间日期；series 里面的 data 是数组中的 value ，解释为对应日期的浏览量。
使用php查询半天依旧没弄出来，原本是按照时间查询数据库，发现数据库没对应的数据，之后打算从今天开始每日记录文章的点击数，发现太麻烦。。。。。
演示图片：
完整的代码：
<script src="https://cdn.staticfile.org/echarts/4.6.0/echarts.min.js"></script>
<div class="part">
<p class="tt"><span>浏览统计(最近30天)</span></p>
<div class="items">
<div id="echart">
<script defer type="text/javascript">
var dom = document.getElementById("echart");
var myChart = echarts.init(dom);
var app = {};
option = null;
option = {
color: ['#ef1616'],
tooltip: {
trigger: 'axis',
},
calculable : true,
grid: {
left: '2%',
top: '25px',
right: '2%',
bottom: '60px',
containLabel: true
},
dataZoom: [{ // 这个dataZoom组件，默认控制x轴。
type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
start: 50, // 左边在 10% 的位置。
end: 100 // 右边在 60% 的位置。
}],
xAxis: [{
type: 'category',
splitLine: {
show: false
},
axisLine: {
show: !1
},
axisTick: {
show: !1
},
axisLabel: {
show: true,
margin: 20,
textStyle: {
color: '#999',
'fontSize': 12,
}
},
boundaryGap:false,
data: ['10-18', '10-19', '10-20', '10-21', '10-22', '10-23', '10-24', '10-25', '10-26', '10-27', '10-28', '10-29', '10-30', '10-31', '11-01', '11-02', '11-03', '11-04', '11-05', '11-06', '11-07', '11-08', '11-09', '11-10', '11-11', '11-12', '11-13', '11-14', '11-15', '11-16']
}],
yAxis: [{
type: 'value',
axisLine: {
lineStyle: {
color: ["#c1c6ca"]
}
},
axisLabel: {
show: !1,
inside: true
},
splitLine: {
lineStyle: {
color: ["#c1c6ca"]
}
}
}],
series: [{
name: '浏览量',
type: 'line',
stack: '总量',
itemStyle: {
normal: {
lineStyle: {
width: 2
}
}
},
smooth: true,
areaStyle: {
normal: {
opacity: 1,
color: {
x: 0,
y: 0,
x2: 0,
y2: 1,
type: "linear",
global: !1,
colorStops: [{
offset: 0,
color: "#ff5b5b"
}, {
offset: 1,
color: "#f99191"
}]
}
}
},
data: [0, 4, 1, 0, 0, 1, 2, 4, 4, 0, 0, 4, 1, 1, 1, 1, 0, 0, 0, 0, 1, 0, 1, 2, 5, 0, 1, 0, 2, 1]
}]
};
myChart.setOption(option);
</script>
</div>
</div>
</div>
正文结束
