Layui uses echorts

u011042325 2022-02-13 05:53:02 阅读数:590

layui uses echorts

layui project , You need to show the functions related to the chart , The official website is used by default echarts Chart Library , But among the free download components , Does not contain echarts Components , We need to extend the components ourselves .

Go to echarts download echarts.js, link :

https://echarts.apache.org/handbook/zh/get-started/

1. Create a new one demo.html, And introduce layui and echarts.js, Here's the picture

  introduce layui package :

<link rel="stylesheet" href="layui/css/layui.css?v=1">
<!-- introduce layui.js Of <script> Labels are best placed in html At the end of -->
<script src="layui/layui.js"></script>

Define a container for storing charts   You need to specify the size of this container

<!-- by ECharts Prepare a with defined width and height DOM, Width and height must be defined to display -->
<div style="width: 100%;height: 300px;" id="shopping"></div>

2.Echart As layui The internal components of Need configuration After configuration, you can use

layui.config({
version: 1,
base: './echarts/' // This is what you put echarts.js The catalog of
}).use(['element', 'echarts'], function() {
});

3.echarts.js It also needs to be configured

The original head is :

It is amended as follows :

(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
typeof define === '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';

You need to add... At the bottom  return exports;

Otherwise, an error will be reported when quoting :Uncaught TypeError: Cannot read property 'init' of undefined

 4.layui Use in :

<script type="text/javascript">
layui.config({
version: 1,
base: 'echarts/' // This is what you put Echart.js The catalog of
}).use(['element', 'echarts', 'carousel'], function () {
var element = layui.element,
$ = layui.jquery,
carousel = layui.carousel,
echarts = layui.echarts;
var shopping = echarts.init(document.getElementById('shopping'));
// Specify configuration items and data for the chart
var optionShopping = {
title: {
text: ' Commodity order '
},
tooltip: {},
legend: {
data: [' sales ']
},
xAxis: {
data: [' shirt ', ' Woolen sweater ', ' Snow spins unlined upper garment ', ' The trousers ', ' High heels ', ' socks ']
},
yAxis: {type: 'value'},
series: [
{
name: ' sales ',
type: 'bar',// Columnar
data: [5, 20, 36, 10, 10, 20],
itemStyle: {
normal: {// The color of the pillars
color: '#4ad2ff'
}
}
}
]
};
// Use the configuration item and data display chart just specified .
shopping.setOption(optionShopping);
});
</script>

5. effect

 

 

copyright:author[u011042325],Please bring the original link to reprint, thank you. https://en.javamana.com/2022/02/202202130552593545.html