LayUI整合echarts

一、步骤一从官网或者其他网站下载echarts.js不要下载压缩版echarts.min.js。本地测试使用的是4.9.0版本二、修改echarts.js在开头的地方修改为(function(global,factory){typeofexportsobjecttypeofmodule!undefined?factory(exports):typeofdefinefunctiondefine.amd?define([exports],factory):window.layuilayui.define?layui.define(function(exports){exports(echarts,factory(exports))}):(factory((global.echarts{})));}(this,(function(exports){use strict;结尾处修改为exports.AxisAxis;exports.envenv$1;exports.parseGeoJsonparseGeoJson;returnexports;})));//# sourceMappingURLecharts.js.map三、项目配置新增echartslayui.config({base:./wno704-blog/,debug:true}).extend({xmSelect:lay/extends/xm-select,apexcharts:lay/extends/apexcharts.min,eleTree:lay/extends/eleTree,echarts:lay/extends/echarts}).use([index]);四、显示图表如下style#wno-echarts-area .layui-card-body div{height:300px;}/styledivclasslayui-fluid layui-anim wno-animidwno-echarts-arealay-title折线图divclasslayui-row layui-col-space8 wno-containerdivclasslayui-col-md6 layui-col-sm6 layui-col-xs12divclasslayui-carddivclasslayui-card-header基础折线图/divdivclasslayui-card-bodydividbaseLineChart/div/div/div/div/div/divscriptdata-th-inlinejavascripttypetext/javascriptlayui.use([echarts],function(){letechartslayui.echarts;// ------------- baseLineChart -------------------letbaseLineChartOptions{tooltip:{trigger:axis,extraCssText:width:150px;height:100px;},xAxis:{type:category,data:[Mon,Tue,Wed,Thu,Fri,Sat,Sun]},yAxis:{type:value},series:[{data:[150,230,224,218,135,147,260],type:line}]};varbaseLineChartecharts.init(document.getElementById(baseLineChart),shine);baseLineChart.setOption(baseLineChartOptions,true);});/script五、测试附echarts 4.x 版本示例学习 https://echarts.apache.org/v4/examples/zh/index.htmlecharts 5.x 版本示例学习 https://echarts.apache.org/examples/zh/index.html更多图标样式http://chartlib.datains.cnhttps://madeapie.comhttp://www.isqqw.comhttp://ppchart.com