新手用H5实现基础的echarts表格

用echarts的人都知道,有些实例是可以直接复制echarts中实例的代码,然后稍加改动即可
但是新手刚接触的话可能会一脸懵逼
现在我来直接上代码
首先我们需要下载echarts插件,或者直接引入即可

主要需要这几部实现echarts图表:

1.引入echarts文件
2.定义一个容器div，存放图表
3.初始化echarts实例对象
4.指定图表的配置项和数据，即设置option
5.使用刚指定的配置项和数据显示图表

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="js/jquery-2.1.1.min.js"></script>//需要先引入echarts<script src="js/echarts.min.js"></script>
</head>
<body>//定义一个盒子<div id="scales" style=" width: 800px; height: 600px;"></div><script>// 函数调用才会生效$(function(){scales()});function scales(){// 初始化echart实例，获取domlet scales1 = echarts.init(document.getElementById('scales'));//   以下都是复制图表图例中的,若有其他需要的功能可自行添加var option={// 图表标题,有的时候可能位置不是很好调整,也可以自己写个标签写标题title: {text: '堆叠区域图'},// 提示信息tooltip: {trigger: 'axis',   // 触发类型，默认数据触发，可选为：'item' ¦ 'axis'axisPointer: {    // 坐标轴指示器，坐标轴触发有效type: 'cross',   // 默认为直线，可选为：'line' | 'shadow'label: {backgroundColor: '#6a7985'}}},// 图例legend: {data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']},//布局toolbox: {feature: {saveAsImage: {}}},// 网格grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},// X轴中的数据xAxis: [{type: 'category',boundaryGap: false,data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']}],// y轴中的数据yAxis: [{type: 'value'}],// 数据series: [{name: '邮件营销',type: 'line',stack: '总量',areaStyle: {},data: [120, 132, 101, 134, 90, 230, 210]},{name: '联盟广告',type: 'line',stack: '总量',areaStyle: {},data: [220, 182, 191, 234, 290, 330, 310]},{name: '视频广告',type: 'line',stack: '总量',areaStyle: {},data: [150, 232, 201, 154, 190, 330, 410]},{name: '直接访问',type: 'line',stack: '总量',areaStyle: { normal: {} },data: [320, 332, 301, 334, 390, 330, 320]},{name: '搜索引擎',type: 'line',stack: '总量',label: {normal: {show: true,position: 'top'}},areaStyle: { normal: {} },data: [820, 932, 901, 934, 1290, 1330, 1320]}]}//使用刚指定的配置项和数据显示图表scales1.setOption(option);}</script>
</body>
</html>

最终显示的结果如图

新手用H5实现基础的echarts表格相关推荐

新手上路：ADAMS 基础知识讲解（图文并茂）【转载仿真论坛】(四）
引用 Baker 的新手上路:ADAMS 基础知识讲解(图文并茂)[转载仿真论坛](四) 14.如何在ADAMS下由数据生成样条曲线? 在tools->command navigator... ...
datagridview 绑定list 不能刷新界面_人人都可写代码-H5零基础编程-首页界面实操06...
欢迎来到人人都可写代码,大家好,我是杨晓华,今天我们的课程内容是,项目实操,开发一个首页界面的H5. 这是要实现的H5首页界面展示效果,下面就是教大家如何制作的步骤: 1.在views的项目smart ...
datagridview 绑定list 不能刷新界面_人人都可写代码-H5零基础编程-发布活动界面实操07...
欢迎来到人人都可写代码,大家好,我是杨晓华,今天我们的课程内容是,项目实操,开发一个发布活动界面的H5. 这是要实现的H5发布活动界面展示效果,下面就是教大家如何制作的步骤: 1.在views的项目s ...
新手学习python零基础_一个零基础新手学习Python应该知道的学习步骤与规划
很多初学Python的同学都面临着很多的疑问,在之前的文章中我大致的很多问题我已经进行了讲解,无论你是编程零基础.数学,英语不错.还是说没有一个好的学习路线和学习规划等等,在之前的文章中我都给大家进行 ...
计算机如何制作表格基础,计算机基础教程(Word表格制作)
<计算机基础教程(Word表格制作)>由会员分享,可在线阅读,更多相关<计算机基础教程(Word表格制作)(12页珍藏版)>请在人人文库网上搜索. 1.主编 : 刘林 ( ...
计算机表格行列知识,计算机基础知识——应用表格.ppt
计算机基础知识--应用表格应用表格课前导读基础知识重点知识了解知识基础知识插入表格.合并和拆分单元格.使读者学习到最基本的表格插入和编辑的方法. 重点知识绘制表格.调整表格结构.绘制斜 ...
新手如何Reverces（基础ctf教程篇）
新手如何Reverces(基础ctf教程篇) 提示:文章依靠C语言,并且需要了解内存机制文章目录新手如何Reverces(基础ctf教程篇) 前言一.关键代码定位 1.API断点法 2.字符串检 ...
html5生成excel,H5纯前端生成Excel表格
H5纯前端生成Excel表格方法如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 var arr = [ 14 { 15 "姓名":"喵喵喵" ...
Echarts 表格通过ajax异步请求实现动态赋值（分析同比环比的实现）
Echarts 表格通过ajax异步请求实现动态赋值(分析同比环比的实现) 对于ElementUI中使用ECharts在上一篇文章中已经说明具体使用方法一.效果图:(以每一个月的工业产值为例) 我们 ...

新手用H5实现基础的echarts表格

主要需要这几部实现echarts图表:

新手用H5实现基础的echarts表格相关推荐

最新文章

热门文章