echarts笔记

ECharts 笔记

简介

ECharts 是一个基于 JavaScript 的开源可视化库，它提供了直观、交互丰富、可高度自定义的数据可视化图表，可以用于展示各种类型的数据，如线性图、柱状图、饼图、散点图、地图等等。

安装

ECharts 可以通过 npm 安装：

npm install echarts

或者直接从 ECharts 的官网下载压缩包。

基本用法

引入 ECharts

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ECharts 示例</title>
    <!-- 引入 ECharts 核心库 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
  </head>
  <body>
    <div id="chart" style="width: 600px; height: 400px;"></div>
    <script>
      // 初始化 ECharts 实例
      var myChart = echarts.init(document.getElementById('chart'));

      // 绘制图表
      myChart.setOption({
        title: { text: '示例图表' },
        tooltip: {},
        xAxis: {
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {},
        series: [{
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20, 5]
        }]
      });
    </script>
  </body>
</html>

绘制图表

ECharts 的基本用法是通过调用 setOption 方法来绘制图表。setOption 方法接收一个对象参数，包含各种配置项，例如标题、坐标轴、系列数据等等。下面是一个简单的示例，绘制了一个柱状图：

// 初始化 ECharts 实例
var myChart = echarts.init(document.getElementById('chart'));

// 绘制图表
myChart.setOption({
  title: { text: '示例图表' },
  tooltip: {},
  xAxis: {
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: {},
  series: [{
    name: '销量',
    type: 'bar',
    data: [5, 20, 36, 10, 10, 20, 5]
  }]
});

常见类型参照官网，下面一些列子的部分代码，以官网为准。

折线图

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'
    }]
};

柱状图

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar'
    }]
};

饼图

option = {
    series: [{
        data: [
            {value: 335, name: '直接访问'},
            {value: 310, name: '邮件营销'},
            {value: 234, name: '联盟广告'},
            {value: 135, name: '视频广告'},
            {value: 1548, name: '搜索引擎'}
        ],
        type: 'pie'
    }]
};

散点图

option = {
    xAxis: {},
    yAxis: {},
    series: [{
        symbolSize: 20,
        data: [
            [10.0, 8.04],
            [8.0, 6.95],
            [13.0, 7.58],
            [9.0, 8.81],
            [11.0, 8.33],
            [14.0, 9.96],
            [6.0, 7.24],
            [4.0, 4.26],
            [12.0, 10.84],
            [7.0, 4.82],
            [5.0, 5.68]
        ],
        type: 'scatter'
    }]
};

热力图

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'category',
        data: ['1', '2', '3', '4', '5', '6', '7']
    },
    visualMap: {
        min: 0,
        max: 50,
        calculable: true,
        orient: 'vertical',
        left: 'right',
        top: 'center'
    },
    series: [{
        data: [
            [0, 0, 10],
            [0, 1, 20],
            [0, 2, 30],
            [0, 3, 40],
            [0, 4, 50],
            [0, 5, 40],
            [0, 6, 30],
            [1, 0, 20],
            [1, 1, 30],
            [1, 2, 40],
            [1, 3, 50],
            [1, 4, 40],
            [1, 5, 30],
            [1, 6, 20],
            [2, 0, 30],
            [2, 1, 40],
            [2, 2, 50],
            [2, 3, 40],
            [2, 4, 30],
            [2, 5, 20],
            [2, 6, 10],
            [3, 0, 40],
            [3, 1, 50],
            [3, 2, 40],
            [3, 3, 30],
            [3, 4, 20],
            [3, 5, 10],
            [3, 6, 0],
            [4, 0, 50],
            [4, 1, 40],
            [4, 2, 30],
            [4, 3, 20],
            [4, 4, 10],
            [4, 5, 0],
            [4, 6, 10],
            [5, 0, 40],
            [5, 1, 30],
            [5, 2, 20],
            [5, 3, 10],
            [5, 4, 0],
            [5, 5, 10],
            [5, 6, 20],
            [6, 0, 30],
            [6, 1, 20],
            [6, 2, 10],
            [6, 3, 0],
            [6, 4, 10],
            [6, 5, 20],
            [6, 6, 30]
        ],
        type: 'heatmap'
    }]
};

仪表盘

option = {
    series: [{
        type: 'gauge',
        startAngle: 180,
        endAngle: 0,
        pointer: {
            show: false
        },
        axisLine: {
            lineStyle: {
                width: 20,
                color: [
                    [0.2, '#67e0e3'],
                    [0.8, '#37a2da'],
                    [1, '#fd666d']
                ]
            }
        },
        axisTick: {
            distance: -30,
            splitNumber: 5,
            length: 8,
            lineStyle: {
                color: '#fff',
                width: 2
            }
        },
        splitLine: {
            distance: -30,
            length: 30,
            lineStyle: {
                color: '#fff',
                width: 4
            }
        },
        axisLabel: {
            distance: -50,
            color: '#fff',
            fontSize: 20
        },
        detail: {
            valueAnimation: true,
            formatter: '{value}%',
            color: '#fff',
            fontSize: 40,
            offsetCenter: [0, '-10%']
        },
        data: [{
            value: 60
        }]
    }]
};

以上是常见的 ECharts 类型代码示例

posted @   runrab  阅读(30)  评论(0)  编辑  收藏  举报
相关博文：
· nodejs入门
· Mook.js模拟后端数据
· Echarts
· echarts入门教程（超级详细带案例）
· CMS可视化---ECharts图表
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· AI技术革命，工作效率10个最佳AI工具
点击右上角即可分享
微信分享提示
AI IDE Trae