新手如何快速上手echarts

最新推荐文章于 2022-10-29 12:33:29 发布

故事与我

最新推荐文章于 2022-10-29 12:33:29 发布

阅读量353

点赞数

文章标签： html5 css3 javascript

本文链接：https://blog.youkuaiyun.com/weixin_45102155/article/details/106085727

版权

本文介绍如何使用ECharts创建数据可视化图表，包括下载、容器创建、图表初始化及配置，适用于PC和移动设备，兼容多种浏览器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
①下载

https://echarts.apache.org/zh/download.html

也可以在cdn引入echarts

https://www.bootcdn.cn/

②创建一个放echarts的容器

<div id="main" style="width: 600px;height:400px;"></div>

③初始化echarts

 var myChart = echarts.init(document.getElementById('main'));

④指定图表的配置项和数据（可以直接复制官网里的实例）

 option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
    }]
};