LayUI+Echart实现图表
2024-09-03 23:37:32
1.首先 定义一个容器存放图表 需要指定这个容器的大小
<div class="layui-card">
<div class="layui-card-header">柱形图</div>
<div class="layui-card-body">
<div id="EchartZhu" style="width: 500px;height: 500px;"> </div>
</div>
</div>
2.引入layui包 这个大家都懂得吧
3.Echart 作为layui的内部组件使用 需要配置 配置后才可以使用
layui.config({
version: ,
base: '..' //这个就是你放Echart.js的目录
}).use(['element', 'echarts'], function() {});
4.Echart.js 也需要配置 这个网上有很多例子 大家可以去看一下 这里简单的列一下
(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 = {})));
}
5.显示图表 首先是layui内置模块
var element = layui.element,
$ = layui.jquery,
echarts = layui.echarts;
然后基于准备好dom元素 创建Echart实例
var chartZhu = echarts.init(document.getElementById('EchartZhu'))；
指定图表配置项和数据
//指定图表配置项和数据
var optionchart = {
title: {
text: '商品订单'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周天']
},
yAxis: {
type: 'value'
},
series: [{
name: '销量',
type: 'bar', //柱状
data: [,,,,,,],
itemStyle: {
normal: { //柱子颜色
color: 'red'
}
},
},{
name:'产量',
type:'bar',
data:[,,,,,,],
itemStyle:{
normal:{
color:'blue'
}
}
}]
}; var optionchartZhe = {
title: {
text: '商品订单'
},
tooltip: {},
legend: { //顶部显示 与series中的数据类型的name一致
data: ['销量', '产量', '营业额', '单价']
},
xAxis: {
// type: 'category',
// boundaryGap: false, //从起点开始
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
type: 'value'
},
series: [{
name: '销量',
type: 'line', //线性
data: [, , , , , , ],
}, {
name: '产量',
type: 'line', //线性
data: [, , , , , , ],
}, {
smooth: true, //曲线 默认折线
name: '营业额',
type: 'line', //线性
data: [, , , , , , ],
}, {
smooth: true, //曲线
name: '单价',
type: 'line', //线性
data: [, , , , , , ],
}]
}; var optionchartBing = {
title: {
text: '商品订单',
subtext: '纯属虚构', //副标题
x: 'center' //标题居中
},
tooltip: {
// trigger: 'item' //悬浮显示对比
},
legend: {
orient: 'vertical', //类型垂直,默认水平
left: 'left', //类型区分在左 默认居中
data: ['单价', '总价', '销量', '产量']
},
series: [{
type: 'pie', //饼状
radius: '60%', //圆的大小
center: ['50%', '50%'], //居中
data: [{
value: ,
name: '单价'
},
{
value: ,
name: '总价'
},
{
value: ,
name: '销量'
},
{
value: ,
name: '产量'
}
]
}]
};
在准备好的容器中显示出来
chartZhu.setOption(optionchart, true);
6.效果如下：
最新文章
- f(n) hdu 2582
- vs下 qt源码调试
- android handler runnable使用实例(关键是内部run中停止)
- OC第七节——内存管理
- Android之Toast通知的几种自定义用法
- 《C#编程风格》还记得多少
- 二模08day1解题报告
- git之添加ssh
- linux 用 SSH2协议远程连接并控制 linux
- MySql命令的基本操作
- jQuery.Validate自定义规程的使用案例
- HDU2035 人见人爱A^B(快速幂)
- tomcat 7配置数据库连接池，使用SQL Server2005实现
- 基于jQuery的前端如何做到无伤迁移
- response.setContentType与 request.setCharacterEncoding 区别
- django学习——url的name
- org.w3c.dom.Element 缺少 setTextContent 步骤
- 手把手教你用Jenkins自动发布dotnet core程序
- 表单组件 form fastadmin（生成表单元素）
- eclipse下启动tomcat访问网址报404错误