什么是ECharts
官
ECharts是一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表
简介
- 跟wow这类一个性质 是一个插件
- 提供可自定义的图表
- 加载快 兼容性强
ECharts的使用
既然是一个插件 那么必不可少的当然就是引入
先贴一个官 教程
1.下载插件
npm安装或者文件直接导入
2.绘制一个最简单的可视化图表
解释
| 属性名称 | 大致作用 | 举例方法 |
|---|---|---|
| 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 具体的数据 |
自主查询 才是王道
官 有一篇官方文档 可以帮助你实现你想要的个性化效果，修改颜色 具体位置大小跟不在话下，用法也是相当简单，想修改那一条，就先去他的主页面 再在里面查找他的属性值比如我想修改图列的类型
在html中使用
今天只着手与一点 自定义皮肤
在官方 会有官方已经配置好的很多好看的主题 你大可以直接使用 也可以用 dark这种不需要引入直接.dark就可以的主题你要记住，别人配置的就是最好看的，自己配的配到最后永远是花里胡哨，就跟你打游戏捏脸一样 默认的挺好
不过还是要说说用法的
- 进入官 下载 主题下载就可以看到主题配置工具了 跟这个插件一样 非常的可视化
- 对自己的主题进行各种配置 捏出你喜欢的主题吧
- 配置完成后直接点击下载主题，然后把里面的js内容直接复制一份到你的js文件夹里面，他就跟一个插件一样 直接引入
- 将该文件在 HTML 中引用；
- 使用 echarts.init(dom, ‘roma’) 创建图表，第二个参数即为 *.js 文件中注册的主题名字。
声明：本站部分文章及图片源自用户投稿，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！