CMS可视化---ECharts图表
一、ECharts介绍
ECharts,全称Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,能够流畅的运行在PC以及移动设备上,兼容当前绝大部分浏览器。为我们许多提供直观,生动,可交互,可高度个性化定制的数据可视化图表。支持折线图、柱状图、散点图、K线图、饼图、雷达图、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表,支持多图表、组件的联动和混搭展现。
二、ECharts入门教程
1.下载echarts.js文件:下载 - Apache ECharts
(1)引入js文件
(2)为 ECharts 准备一个定义了宽高的 DOM
(3)基于准备好的dom,初始化echarts实例
(4)指定图表的配置项和数据
(5)使用刚指定的配置项和数据显示图表。
2.编写代码
柱状图示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 1.引入js文件 -->
<script src="./echarts/echarts.min.js"></script>
</head>
<body>
<!-- 2.为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 3.基于准备好的dom,初始化echarts实例
const myChart = echarts.init(document.querySelector('#main')); // 4.指定图表的配置项和数据
const option = {
// 图表标题
title: {
text: 'ECharts 入门示例'
},
// 鼠标移入的提示信息
tooltip: {},
// 顶部提示消息
legend: {
data: ['销量']
},
// x轴
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
// y轴
yAxis: {},
// 图表内容:柱子
series: [
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}
]
}; // 5.使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
3.ECharts的基础配置
想要用其他的一些图表样式,可以去官网找到自己想要的再加以修改:Examples - Apache ECharts
里面有很多图表样式可以拿过来直接用,根据自己的需求修改里面的配置项,所以我们需要了解ECharts的基础配置。一些常用的配置项在代码中有注释可以看一下!
可以参考官网的配置项手册:Documentation - Apache ECharts
tooltip // 鼠标移入提示信息
title // 标题
legend // 顶部图例提示
color // 颜色
series // 图表数据
xAxis // x轴
yAxis // y轴
总结
ECharts就是使用 JavaScript 实现的开源可视化库,能够流畅的运行在PC以及移动设备上,兼容当前绝大部分浏览器,提供直观,生动,可交互,可高度个性化定制的数据可视化图表,并且支持多图表、组件的联动和混搭展现。
CMS可视化---ECharts图表的更多相关文章
- 【可视化】DataV接入ECharts图表库 可视化利器强强联手
DataV接入ECharts图表库 可视化利器强强联手 摘要: 两个扛把子级产品的结合,而且文末有彩蛋. DataV 数据可视化是搭建每年天猫双十一作战大屏的幕后功臣,ECharts 是广受数据可视化 ...
- ***ECharts图表入门和最佳实践
ECharts数据图表系统? 5分钟上手! [ECharts简介] ECharts开源来自百度商业前端数据可视化团队,基于html5 Canvas,是一个纯Javascript图表库,提供直观,生动, ...
- ECharts图表系统 特性总览
最近在玩ECharts,感觉真心不错,在这里把官方的资料收集收集,给大家推荐一下下~ Architecture ECharts (Enterprise Charts 商业产品图表库) 提供商业产品常用 ...
- ECharts 图表设置标记的大小 symbolSize 和获取标记的值
ECharts 是百度出品,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等) ...
- ECharts图表插件(4.x版本)使用(一、关系图force节点显示为自定义图像/图片,带分类选择)
导读 ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safar ...
- vue使用Echarts图表
vue使用Echarts图表 童话_xxv 关注 0.5 2018.12.11 09:09* 字数 325 阅读 1456评论 2喜欢 13 在开发后台系统时,使用图表进行数据可视化,这样会使数据更 ...
- echarts图表第一个案例
1.action中获取到数据 @Override public String execute() throws Exception { List<Student> find = echar ...
- echarts图表标签(axisLabel)折行
在项目中遇到了一个echarts图表标签过长需折行的需求,so引出这篇总结,啦啦啦有帮助就多多支持啦,撒花撒花撒花~~~~ 在此不对echarts其他用法做解释,详细见echarts文档(点击前往) ...
- ECharts图表中级入门之formatter:夜谈关于ECharts图表内的数据格式化方法
来源于:http://www.ithao123.cn/content-3751220.html 格式化之所以存在,主要是因为我们想把一些不够人性化的内容通过某种处理让其变得人性化,便于用户更好地理解内 ...
随机推荐
- Pyhton实践项目之(一)五子棋人机对战
1 """五子棋之人机对战""" 2 3 import random 4 import sys 5 6 import pygame 7 im ...
- aws-cli命令-vpcs及subnets相关的查询
关于AWS上vpcs及subnets相关的查询,常用的命令如下: # 查询所有的vpc信息 aws ec2 describe-vpcs --output json # 查询所有所有的subnet相关的 ...
- 华为设备配置Stelnet命令
配置SSH server:rsa local-key-pair create 生成本地RSA主机密钥对 display rsa local-key-pair public 查看本地密钥对中的公钥信息 ...
- 驱动开发:内核特征码扫描PE代码段
在笔者上一篇文章<驱动开发:内核特征码搜索函数封装>中为了定位特征的方便我们封装实现了一个可以传入数组实现的SearchSpecialCode定位函数,该定位函数其实还不能算的上简单,本章 ...
- Java模拟生产者-消费者问题。生产者不断的往仓库中存放产品,消费者从仓库中消费产品。其中生产者和消费者都可以有若干个。在这里,生产者是一个线程,消费者是一个线程。仓库容量有限,只有库满时生产者不能存
需求分析:生产者生产产品,存放在仓库里,消费者从仓库里消费产品. 程序分析: 1.生产者仅仅在仓储未满时候生产,仓满则停止生产. 2.消费者仅仅在仓储有产品时候才能消费,仓空则等待. 3.当消费者发现 ...
- html页面跳转方式
js里的方法 第一种: window.location.href = XXXX; 第二种: window.setTimeout("javascript:location.href='xxxx ...
- Selenium4+Python3系列(五) - 多窗口处理之句柄切换
写在前面 感觉到很惭愧呀,因为居然在Selenium+Java系列中没有写过多窗口处理及句柄切换的文章,不过也无妨,不管什么语言,其思路是一样的,下面我们来演示,使用python语言来实现窗口句柄的切 ...
- mybatis-核心配置文件讲解
核心配置文件详解 核心配置文件中的标签必须按照固定的顺序(有的标签可以不写,但顺序一定不能乱): properties.settings.typeAliases.typeHandlers.object ...
- 在博客中实现播放音乐功能(QQ,网易,酷狗,虾米,百度)
1.在页头head标签里添加: <link rel="stylesheet" href="https://static.likepoems.com/cdn/apla ...
- Mybatis:解决调用带有集合类型形参的mapper方法时,集合参数为空或null的问题
此文章有问题,待修改! 使用Mybatis时,有时需要批量增删改查,这时就要向mapper方法中传入集合类型(List或Set)参数,下面是一个示例. // 该文件不完整,只展现关键部分 @Mappe ...