1、引入echarts.js文件
<!-- 引入echarts 图形化展示 -->
<script type="text/javascript" src="${ctxStatic}/common/yuzhong/js/echarts/echarts.js"></script>
2、HTML代码
<div class="t2_box_con" style="padding:0px 10px 0px;">
<!-- 此处加载图像 -->
<div id="rllfx" style="width: 100%; height: 242px;"></div>
</div>
3、配置数据和加载图像
<script type="text/javascript">
var XData = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
var YData = [10, 23, 65, 36, 85, 43, 60];
var rllfx = echarts.init(document.getElementById("rllfx"));
var option = {
/* 线条颜色,可设置多个颜色 */
color: ['#ffa82f'],
/* 图像四周边距设置 */
grid:{
left:30,
top:30,
right:20,
bottom:30
},
/* 图例说明 */
legend: {
// 图例排项 vertical-"竖向"; horizontal-"横向"
orient: 'horizontal',
// 图例组件离容器左侧的距离
right : 60,
top: 0,
//图例文字的样式
textStyle:{
color:'#6ab2ec',
},
// 与series中每个name一一对应
data:['人流量']
},
/* 鼠标悬浮时显示数据 */
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器,坐标轴触发有效
type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
xAxis: {
type: 'category',
data: XData,
//设置轴线的属性
axisLine:{
lineStyle:{
color:'#6ab2ec',
}
},
//调整x轴的lable
axisLabel:{
textStyle:{
fontSize:10 // 让字体变小
}
}
},
yAxis: {
type: 'value',
// 控制网格线是否显示
splitLine: {
show: true,
// 改变轴线颜色
lineStyle: {
// 使用深浅的间隔色
color: ['#132a6e']
}
},
//设置轴线的属性
axisLine:{
lineStyle:{
color:'#6ab2ec',
}
}
},
/* 数据配置,若有多条折线则在数组中追加{name: , data: } */
series: [{
name:'人流量',
data: YData,
type: 'line',
symbol: 'circle',
// 设置折点大小
symbolSize: 10,
// 设置为光滑曲线
smooth: true
},]
};
rllfx.setOption(option);
</script>
4、效果图
6、在线调试(ECharts官网)