ECharts是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表,
ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。

Open官方的示例

点击跳转到官方示例
提示：找到自己对应要用的图表：

下面我就展示一个柱状图的示例

提示：其实在设置一些属性的时候找到对应的父级，语法是对的就差不多ok了！

一、示例

1、打开官方的示例
左边有对应的设置属性和数据

//X轴xAxis: [{type: 'value'}],//Y轴yAxis: [{type: 'category',axisTick: {show: false},data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']}],series: [{name: 'Profit',type: 'bar',label: {//设置是否在页面显示数据show: true,position: 'inside'//设置页面保留两位小数formatter: (d) => {let val;if (String(d.value).indexOf(".") > -1) {val = d.value.toFixed('2')} else {val = d.value}return val;}},emphasis: {focus: 'series'},/**data就是对应的蓝色显示条，*如果想设置百分比% *保留小数00.00*往下看*/data: [200, 170, 240, 244, 200, 220, 210]},

二、属性设置

提示：已经打开一个示例的网页了，再打开一个页面设置属性文档的
点击打开属性文档页面

1.series 设置类型数据格式化

刚刚打开的示例是横向的柱状图
就是下面

//设置图比如柱状图，折线图
/*
*bar: 柱状图
*line:折线图
* 等等一些
*/
type: 'bar' ,
colorBy: 'series' ,
legendHoverLink: true ,
coordinateSystem: 'cartesian2d' ,
xAxisIndex: 0 ,
yAxisIndex: 0 ,
polarIndex: 0 ,
roundCap: false ,
realtimeSort: false ,
showBackground: false ,
//还要很多属性根据自己的需要设置
/*
*刚刚打开了一个示例的页面左边我们可以编辑
*然后根据自己的需求，对应属性文档对应更改
*设置之前找到父节点，然后设置属性，注意格式逗号和大括号

总结

Echart：里面的内容还是比较全的，可以对应设置属性的文档，来编辑示例，最终复制到自己的编辑器上面去，
如果你看不懂英语可以稍微翻译一下，但是的话，最好不要翻译，因为你设置的时候都是英文属性

【关于学习Echarts的时候 - “新手”-解决方案】相关推荐

echarts自动生成图片的解决方案
echarts自动生成图片的解决方案参考文章: (1)echarts自动生成图片的解决方案 (2)https://www.cnblogs.com/dubbo/p/11416705.html 备忘一下 ...
Echarts 出现不明竖线解决方案
Echarts 出现不明竖线解决方案参考文章: (1)Echarts 出现不明竖线解决方案 (2)https://www.cnblogs.com/yuhanghzsd/p/9627851.html ...
Echarts Y轴遮挡解决方案
Echarts Y轴遮挡解决方案背景:在做手机端的时候要实现图表展示,但是Echarts有个通病,就是对小屏幕的浏览器不太兼容,开始尝试设置绑定div的样式,加上padding :0发现不管用,用谷 ...
【HZHE004】黄子涵学习Echarts
概念篇数据集数据集(dataset)是专门用来管理数据的组件.虽然每个系列都可以在 series.data 中设置数据,但是从 ECharts4 支持数据集开始,更推荐使用数据集来管理数据 ...
【HZHE003】黄子涵学习Echarts
概念篇 ECharts 中的样式简介本文主要是大略概述,用哪些方法,可以在 Apache EChartsTM 中设置样式,改变图形元素或者文字的颜色.明暗.大小等. 本文介绍这几种方式,他们的功能范 ...
【HZHE002】黄子涵学习Echarts
概念篇下面,我们就常见的几种使用场景,介绍如何初始化一个图表以及改变其大小. 图表容器及大小通常来说,需要在 HTML 中先定义一个 <div> 节点,并且通过 CSS 使得该节点具有 ...
【HZHE001】黄子涵学习Echarts
快速上手获取 Apache ECharts 在 https://www.jsdelivr.com/package/npm/echarts 选择 dist/echarts.js,点击并保存为 echa ...
微信小程序引入echarts过大最佳解决方案、echarts在微信开发者工具中不跟随滑动、使用echarts控制台提示使用canvas 2d
一.微信小程序引入echarts过大最佳解决方案微信上传时代码包大小限制为2MB,但是当我们引入echarts以后,单echarts代码包已经973KB,因此再结合额外的业务代码以及其他资源很有可能 ...
PyTorch深度学习实战：从新手小白到数据科学家电子书
作者:张敏著出版社:电子工业出版社 ISBN:9787121388293 出版时间:2020-08-01 PyTorch深度学习实战:从新手小白到数据科学家

【关于学习Echarts的时候 - “新手”-解决方案】

Open官方的示例

一、示例

二、属性设置

1.series 设置类型数据格式化

总结

【关于学习Echarts的时候 - “新手”-解决方案】相关推荐

最新文章

热门文章