关于ECharts 简单好用的数据可视化工具
什么是ECharts
官网
ECharts的使用
既然是一个插件 那么必不可少的当然就是引入
先贴一个官网教程
1.下载插件
npm安装或者文件直接导入
npm install echarts //npm安装代码<script src="js/echarts.min.js"></script> //js导入代码
2.绘制一个最简单的可视化图表
<body><!-- 为 ECharts 准备一个定义了宽高的 DOM --><div id="main" style="width: 600px;height:400px;"></div><!-- 引入刚刚下载的 ECharts 文件 --><script src="echarts.js"></script><script type="text/javascript">// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 指定图表的配置项和数据var option = {title: {text: 'ECharts 入门示例'},tooltip: {},legend: {data: ['销量'],type: ['scroll']},xAxis: {data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);</script></body>
解释
| 属性名称 | 大致作用 | 举例方法 |
|---|---|---|
| title | 标题组件，包含主标题和副标题。 | 包含是否显示（show）标题超链接（ link）等多种属性 |
| legend | 图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。 | legend. type（图列类型）legend. left （图例组件离容器左侧的距离。）等 |
| tooltip | 提示框组件。 | 可以设置全局 坐标系等多个地方 |
| xAxis | x轴的设置 | xAxis. position x轴的位置 xAxis. type = ‘category’ 坐标轴类型 |
| yAxis | y轴的设置 | yAxis. position y轴的位置 yAxis. type = ‘category’ 坐标轴类型 |
| series | 你的数据 | type 类型 是折线图还是柱形图 data 具体的数据 |
自主查询 才是王道
官网有一篇官方文档 可以帮助你实现你想要的个性化效果，修改颜色 具体位置大小跟不在话下，用法也是相当简单，想修改那一条，就先去他的主页面 再在里面查找他的属性值比如我想修改图列的类型
进入legend主属性
#### 查找或者相关属性用法
在html中使用
今天只着手与一点 自定义皮肤
在官方 会有官方已经配置好的很多好看的主题 你大可以直接使用 也可以用 dark这种不需要引入直接.dark就可以的主题你要记住，别人配置的就是最好看的，自己配的配到最后永远是花里胡哨，就跟你打游戏捏脸一样 默认的挺好
不过还是要说说用法的
- 进入官网 下载 主题下载就可以看到主题配置工具了 跟这个插件一样 非常的可视化
- 对自己的主题进行各种配置 捏出你喜欢的主题吧
- 配置完成后直接点击下载主题，然后把里面的js内容直接复制一份到你的js文件夹里面，他就跟一个插件一样 直接引入
- 将该文件在 HTML 中引用；
- 使用 echarts.init(dom, ‘roma’) 创建图表，第二个参数即为 *.js 文件中注册的主题名字。
关于ECharts 简单好用的数据可视化工具相关推荐
- echarts简单的折现数据可视化(需要引入echarts文件)
因为是拷贝echarts里面的,我只做代码讲解,其余的俺不知道 上代码; html代码: <body><!-- 为 ECharts 定义了宽高的 DOM --> //这里我们注 ...
- python画桃花_pyecharts是一款将Python与Echarts结合的强大的数据可视化工具。
参考答案如下 视化单选(10分) 男の人が訪問先で新商品の説明をしています.どのように話を始めますか. 将Ps结据单选(1分) 冯梦龙编撰"三言"的指导思想是: 单选(1分) 尚任 ...
- 相较于echarts，也许这款数据可视化软件更加适合你
echarts作为一款开源数据可视化工具有着许多优点,但是如果你在使用echarts时经常遇到问题,那么相较于echarts,选择一款专业的数据可视化软件也许更符合你的需求. 今天就将为你介绍一款神奇 ...
- 用python进行简单的数据分析和数据可视化
用python进行简单的数据分析和数据可视化 本篇文章主要是初步探索数据分析,简单了解数据分析大致流程 数据来源:来自于Kaggle平台上的一个项目:Explore San Francisco cit ...
- vue全家桶+Echarts+百度地图，搭建数据可视化系统（项目）
vue全家桶+Echarts+百度地图,搭建数据可视化系统 1. 前言 1.1 业务场景 突然接到产品说要做一个数据监控的系统.有线图.柱状图.地图,类似于数据可视化的方式. 本人之前从未接触过Ech ...
- 数据可视化工具-小马BI简单教程【大数据专业必学】
数据可视化工具-小马BI简单教程[大数据专业必学] 高效处理数据 一.数据接入 二.数据处理 三.可视化分析 推荐一款轻量级数据可视化工具--小马BI 这款工具有助于发掘数据驱动业务的价值,对产品,运 ...
- python可视化图表工具_酷炫的可视化图表工具来帮忙 深度评测五大Python数据可视化工具...
原标题:酷炫的可视化图表工具来帮忙 深度评测五大Python数据可视化工具 不少Python用户的一大诉求是做出各种酷炫的可视化图表,而这就需要了解清楚工具特色,才好在制作不同类型图表顺利找到适合自己 ...
- 主流的数据可视化工具介绍
作为一个自诩对全球分析平台了如执掌的资深数据从业人员,给各位分享分享主流的数据可视化工具. 一.可视化平台 1.FineBI 虽作一个BI工具,但是可视化效果很好,可制作Dashboard.优势在于一 ...
- mysql 工具 国产_推荐一款国产化比较好用的数据可视化工具(BI工具)
当人们一提到数据可视化这个词儿呢,很多人大脑会直接闪过两个词. 第一个呢,就是「酷」,非常酷,酷酷的,炫酷......反正已没办法形容.像下面这样的: 好了,炫酷完事了,那另一个关键词就是,就是「难度 ...
最新文章
- 《C++应用程序性能优化::第五章动态内存管理》学习和理解
- linux zsh命令行vim命令补齐,Linux使用zsh提高效率的5条建议
- Hive学习笔记 —— Hive的管理
- 万物新生（爱回收）递交赴美上市招股书，平台服务收入年复合增长达627.7%
- “让Keras更酷一些！”：分层的学习率和自由的梯度
- 大话数据结构：最短路径算法
- PyTorch框架学习六——图像预处理transforms（二）
- ASP.NET 学习笔记_06 Httphandler
- Redhat之package管理--学点 YUM和RPM
- 计算机维修与销售探讨,《计算机维修与维护》面向市场教学的探讨.pdf
- 第四章 ASP.NET MVC HTML辅助方法生成表单标签具体用法
- python安装包，使用镜像安装
- 合并两个有序数组C++
- J2Cache缓存的使用
- 降维打击 Dimensionality reduction attack
- 真无线蓝牙耳机哪家的音质最好？四款音质好蓝牙耳机
- mybatis-plus乐观锁配置
- 计算机的发明还不到一百年 英语,考研英语作文万能句子25个.doc
- 群晖Synology FileStation不显示Share文件夹的解决办法
- android media rw,Android中的“/ storage/udisk/sda4 /”和“/ mnt/media_rw/udisk/sda4 /”有什么区别？...