最近、データベースのデータを破線で表示したいのですが、とても使いやすいBaiduのechartsテーブルを使用しました。これが簡単なレコードです。
公式例：https：//www.echartsjs.com/examples/zh/index.html
echarts.min.jsダウンロードリンク：https： //www.echartsjs.com/zh/builder.html
1.エフェクト画像。効果チャートは、1週間のデータ変化を示しています。x軸は時間、y軸は量です。y軸の数量単位は、バックグラウンドで返されたデータに応じて自動的に変更されます。
2.コード：
1、html部分
<body>
<script type="text/html" id="echartsForm">
<form lay-filter="echartsForm" class="layui-form" >
<div id="speedChart" >
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="speedChartMain" style="width: 700px; height: 450px;"></div>
</div>
<div class="layui-form-item text-right">
<button class="layui-btn layui-btn-primary" style="margin-right: 4%;background-color:#6cb8a9" type="button" ew-event="closeDialog" >关闭</button>
</div>
</form>
</script>
</body>
2.jsを紹介します。echartsはlayuiの組み込みコンポーネントではないため、継承して直接引用する必要はありません。
<script src="../assets/module/echarts.min.js"></script>3. echartsチャートをロードし、スクリプトにコードを記述します
/*折线表的顶部类目名称集合*/
var legendData=['提交量','入库量','成功量'];
/*折线表数据，鼠标移动到折线表某个节点时也会展示*/
var seriesData=[];
/*获取num天之前的日期*/
function getBeforeDateByNum(num) {
var today = new Date();
today.setTime(today.getTime()-(num*24*60*60*1000));
var year= today.getFullYear();
var month=today.getMonth();
month = month + 1;
var date =today.getDate();
if (month < 10) month = "0" + month;
if (date < 10) date = "0" + date;
return (year+"-" + month+"-" +date);
}
/*获取echarts图表x轴节点说明*/
function getEchartsxAxis() {
var data=[];
for(var i=7;i>=1;i--){
var beforDate=getBeforeDateByNum(i);
beforDate=beforDate.replace(new Date().getFullYear()+"-","");
data.push(beforDate)
}
return data;
}
/*echarts图表获取所有数据*/
function getEchartAll(id) {
var returnList = [];
/*请求后台数据，这里封装了ajax*/
admin.syncReq('xxx/xxx', {
dataPipeId: id
}, function (res) {
seriesData = [
{
name: "提交量",
type: "line",
data: res.allCountList
},
{
name: "入库量",
type: "line",
data: res.incountList
}, {
name: "成功量",
type: "line",
data: res.succesedcountList
}
];
}, 'POST', false);
return returnList;
}
/*加载echarts图表*/
function load() {
// 基于准备好的dom，初始化echarts实例
var myChart =echarts.init(document.getElementById("speedChartMain"));
var option = {
tooltip: {
trigger: 'axis'
},
legend: {
data:legendData
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: getEchartsxAxis()
},
yAxis: {
type: 'value'
},
series:seriesData
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option)
}
/*操作栏点击事件显示折线图弹窗*/
function showEcharts(data) {
layer.open({
type: 5,
area: '55%',
title: '一周数据变化',
offset: '5%',
content: $('#echartsForm').html(),
success: function (){
/*根据数据表id从后台获取数据*/
getEchartAll(data.id);
/*渲染表格*/
load();
}
});
}