echarts标签引用多个图表用于同一个页面

  • 原创
  • |
  • 浏览:6549
  • |
  • 更新:

我们在使用echarts时,很多时候,在同一个页需要多个图表,但是我们好用的echarts怎么才在同一个页面使用呢,下面看我的方法

工具/原料

  • echarts.js
  • 自己喜欢的编程工具

方法/步骤

  1. 1

    echarts官网下载好echarts.js文件

    echarts标签引用多个图表用于同一个页面
  2. 2

    打开自己编程工具,新建好自己的dome

    echarts标签引用多个图表用于同一个页面
  3. 3

    把下载好的echarts.js文件放在js文件下面

    echarts标签引用多个图表用于同一个页面
  4. 4

    建好dome时一般会自动新创建一个html文件,我们打开文件(我这里把名字改成我自已的了),然后引用echarts.js文件

    echarts标签引用多个图表用于同一个页面
  5. 5

    然后在boyd标签里写三个div(容器),然后设置它们的样式

    echarts标签引用多个图表用于同一个页面
  6. 6

    在你的js文件或script标签里   获取页面元素的信息

    echarts标签引用多个图表用于同一个页面
  7. 7

     创建一个数组,把option实例存储在这个数组里

    echarts标签引用多个图表用于同一个页面
  8. 8

    如图,红红箭头都是我们实例化echarts用列

    echarts标签引用多个图表用于同一个页面
  9. 8
    此文章非法爬取自百度经验
  10. 9

    option={……}这里面就是我们自己需要引用的图表详细信息了,我这里的直接去官网copy的

    echarts标签引用多个图表用于同一个页面
    echarts标签引用多个图表用于同一个页面
  11. 10

    蓝色箭头所指的是我们把这些实例化的echarts对象存储到我们之前创建的数组里

    echarts标签引用多个图表用于同一个页面
  12. 11

    这里粉色箭头就是我们调用数组里的echarts实列,让图表显示我样想它出现的位置

    echarts标签引用多个图表用于同一个页面
  13. 12

    显示效果

    echarts标签引用多个图表用于同一个页面
    END

注意事项

  • 在获取元素信息时,好像只能用ID来获取,如果用class的话,好像找到,目前还没找原因
经验内容仅供参考,如果您需解决具体问题(尤其法律、医学等领域),建议您详细咨询相关领域专业人士。
作者声明:本篇经验系本人依照真实经历原创,未经许可,谢绝转载。
展开阅读全部