企业官网建设流程全解析

一、步骤一

从官网或者其他网站下载echarts.js，不要下载压缩版echarts.min.js。本地测试使用的是4.9.0版本

二、修改echarts.js

在开头的地方修改为：

(function(global,factory){typeofexports==='object'&&typeofmodule!=='undefined'?factory(exports):typeofdefine==='function'&&define.amd?define(['exports'],factory):window.layui&&layui.define?layui.define(function(exports){exports('echarts',factory(exports))}):(factory((global.echarts={})));}(this,(function(exports){'use strict';

结尾处修改为：

exports.Axis=Axis;exports.env=env$1;exports.parseGeoJson=parseGeoJson;returnexports;})));//# sourceMappingURL=echarts.js.map

三、项目配置新增echarts

layui.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;}</style><divclass="layui-fluid layui-anim wno-anim"id="wno-echarts-area"lay-title="折线图"><divclass="layui-row layui-col-space8 wno-container"><divclass="layui-col-md6 layui-col-sm6 layui-col-xs12"><divclass="layui-card"><divclass="layui-card-header">基础折线图</div><divclass="layui-card-body"><divid="baseLineChart"></div></div></div></div></div></div><scriptdata-th-inline="javascript"type="text/javascript">layui.use(['echarts'],function(){letecharts=layui.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'}]};varbaseLineChart=echarts.init(document.getElementById('baseLineChart'),'shine');baseLineChart.setOption(baseLineChartOptions,true);});</script>

五、测试

附：echarts 4.x 版本示例学习 https://echarts.apache.org/v4/examples/zh/index.html

echarts 5.x 版本示例学习 https://echarts.apache.org/examples/zh/index.html

更多图标样式

http://chartlib.datains.cn

https://madeapie.com

http://www.isqqw.com

http://ppchart.com