Echarts 大数据可视化基本使用

左手js右手vue

于 2022-10-27 21:24:53 发布

阅读量1.4k

点赞数 1

文章标签： echarts javascript ecmascript

本文链接：https://blog.youkuaiyun.com/ck2018182068/article/details/127560576

版权

本文介绍了Echarts用于大数据可视化的应用，包括其与HighCharts、D3的对比，详细阐述了使用Echarts的五个基本步骤，并重点解析了Echarts的主要配置项如series、xAxis、yAxis和grid等。同时，列举了bar柱状图、line折线图、area面积图和pie饼状图等常见图表类型，展示了如何通过配置实现数据堆叠和曲线图效果。

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

Echarts介绍

作用：展示图标，即大数据可视化
和它相同作用的还有heightCharts和D3
Echarts 官网

使用echarts基本步骤

第一步：下载并引入echarts.js文件

<script src="js/echarts.min.js"></script>

第二步：准备一个具备大小的DOM容器

 <div id="container"></div>

第三步：初始化echarts实例对象

var echart = echarts.init(document.getElementById("app"));

第四步：指定配置量和数据option

  var option = {
   
        // 调色盘
        color: ["#55aaff", "#aaff7f", "#55007f", "#fff000"],
        // 图表标题
        title: {
   
            text: "女友个数"
        },
        // 图表的提示
        tooltip: {
   },
        // 图例
        legend: {
    data: ["女友个数", "游戏市场", "吃饭市场",

最低0.47元/天解锁文章