Echarts开源可视化库学习(二)常用图表的实现与效果

一.柱状图

一.Echarts最基本的代码结构

<!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="lib/echarts.min.js"></script>
</head><body><div style="width: 600px;height:400px"></div> <script>//1. ECharts最基本的代码结构var mCharts = echarts.init(document.querySelector("div")) // 初始化echarts实例对象var option = {}//将配置项设置给echarts实例对象mCharts.setOption(option)</script>
</body></html>

x轴数据和y轴数据

图标类型:option编写

var option = {xAxis:{type:'category',   //类目轴data: xDataArr},yAxis:{type: 'value', // 数值轴,  数据通过series 进行配置},series:[{name: '语文',type: 'bar',data: yDataArr}]}//将配置项设置给echarts实例对象mCharts.setOption(option)

代码与效果

<!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="lib/echarts.min.js"></script>
</head><body><div style="width: 600px;height:400px"></div> <script>//1. ECharts最基本的代码结构var mCharts = echarts.init(document.querySelector("div")) // 初始化echarts实例对象var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强']var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86]var option = {xAxis:{type:'category',   //类目轴data: xDataArr},yAxis:{type: 'value', // 数值轴,  数据通过series 进行配置},series:[{name: '语文',type: 'bar',data: yDataArr}]}//将配置项设置给echarts实例对象mCharts.setOption(option)</script>
</body></html>

对柱状图的一些优化和修改

1.显示最大最小值

.markPoint:{data:[{type: 'max',neme: '最大值'},{type: 'min',name: '最小值'}]},

在series里面,添加markPoint方法

2.通过label配置显示数据

label:{show: true},

使数据精确显示具体数据

Echarts开源可视化库学习(二)常用图表的实现与效果相关推荐

Echarts开源可视化库学习(一) 介绍与快速上手
介绍 ECharts是一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safar ...
Echarts开源可视化库学习(三)主题的使用
主题的使用:默认自带的 echarts工具里面自带了两种主题: light 和 dark; 使用在初始化echarts实例对象的时候定义即可 var mCharts = echarts.init(d ...
ECharts可视化库学习笔记
数据可视化 Day01 1.什么是数据可视化 1.1 什么是数据可视化 1.2 可视化的实现方式 2.ECharts的基本使用 2.1 ECharts的介绍丰富的可视化类型多种数据格式支持流数据 ...
开源项目Krita学习(二)
开源项目Krita学习(二) 专有名词记录 nightly版本: 所谓nightly版本,通常是开发者自己维护的一个版本.白天的时候开发者们将各自的修改提交到一个中心代码库,然后在晚上做一次编译得到的 ...
开源ImageFilter库v0.4：新增26种图片效果
开源ImageFilter库v0.4:新增26种图片效果在原有70多种滤镜(v0.3)基础上,又新增实现26种图片效果.目前三个平台的源码已同步并测试完毕. 有朋友反映在ios平台上使用时出现编译错 ...
开源ImageFilter库v0.3：新增22种图片效果
开源ImageFilter库v0.3:新增22种图片效果在原有50多套滤镜(v0.1)基础上,又新增实现22种图片效果.目前三个平台的源码已同步并测试完毕. 下面是图片效果: 原图: ZoomBlu ...
Ajax 学习二 Accordion和AccordionPane 淡入淡出效果和AutoSize自动尺寸
Ajax 学习二 Accordion和AccordionPane 淡入淡出效果和AutoSize自动尺寸源代码 View Code <%@ Page Language="C#&qu ...
【Python】吊打pyecharts，又一超级棒的开源可视化库
今天给大家推荐的这个开源项目是一个非常棒的可视化库. 这个开源项目就是:PyG2Plot . 首先介绍下 G2Plot,G2Plot是蚂蚁集团开源的一个基于图表分类学的可视分析图表库,内置 25+ 常 ...
吊打pyecharts，又一超级棒的开源可视化库
大家好,今天给大家推荐的这个开源项目是一个非常棒的可视化库:PyG2Plot. 首先介绍下 G2Plot,G2Plot是蚂蚁集团开源的一个基于图表分类学的可视分析图表库,内置 25+ 常见图表类型,简 ...

Echarts开源可视化库学习(二)常用图表的实现与效果

一.柱状图

x轴数据和y轴数据

图标类型:option编写

代码与效果

对柱状图的一些优化和修改

Echarts开源可视化库学习(二)常用图表的实现与效果相关推荐

最新文章

热门文章