【H5】 echarts绘制条形统计图，饼状图

最新推荐文章于 2024-07-09 14:13:18 发布

舜岳

最新推荐文章于 2024-07-09 14:13:18 发布

阅读量2.7k

点赞数 1

分类专栏： HTML5 文章标签： canvas

本文链接：https://blog.csdn.net/qq_41614928/article/details/91047940

版权

HTML5 专栏收录该内容

37 篇文章 1 订阅

订阅专栏

[H5] echarts绘制条形统计图

表格需要引入echarts.js：

https://echarts.baidu.com/dist/echarts.min.js

效果图如下：

在这里插入图片描述

引入结构：

实例化： echarts.init(document.getElementById(‘main’))
option：设置指定图表的配置项和数据
setOption(option)：将表显示到页面上

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>条形表</title>
</head>
<body>
  <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
  <div id="main" style="width: 600px;height:400px;"></div>
  <!-- 引入图表样式需要的js文件echarts -->
  <script src="https://echarts.baidu.com/dist/echarts.min.js"></script>
  <script>
    // 1.基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 2.指定图表的配置项和数据 放在option对象里面
    var option = {
      title: {
        text: 'ECharts 入门示例'
      },
      tooltip: {},
      legend: {
        data: ['销量']
      },
      xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
      },
      yAxis: {},
      series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
      }]
    };
    // 3.使用刚指定的配置项和数据 显示图表(将表显示到页面上)。
    myChart.setOption(option);
  </script>
</body>
</html>

下面是饼状图效果：

在这里插入图片描述

饼状图代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>饼图</title>
</head>
<body>
  <div id="main" style="width: 1000px;height:500px;"></div>
  <script src="https://echarts.baidu.com/dist/echarts.min.js"></script>
  <script>
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据 放在option对象里面
    var option = {
      title: {
        text: '南丁格尔玫瑰图',
        subtext: '纯属虚构',
        x: 'center'
      },
      tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
      },
      legend: {
        x: 'center',
        y: 'bottom',
        data: ['rose1', 'rose2', 'rose3', 'rose4', 'rose5', 'rose6', 'rose7', 'rose8']
      },
      toolbox: {
        show: true,
        feature: {
          mark: { show: true },
          dataView: { show: true, readOnly: false },
          magicType: {
            show: true,
            type: ['pie', 'funnel']
          },
          restore: { show: true },
          saveAsImage: { show: true }
        }
      },
      calculable: true,
      series: [
        {
          name: '半径模式',
          type: 'pie',
          radius: [20, 110],
          center: ['25%', '50%'],
          roseType: 'radius',
          label: {
            normal: {
              show: false
            },
            emphasis: {
              show: true
            }
          },
          lableLine: {
            normal: {
              show: false
            },
            emphasis: {
              show: true
            }
          },
          data: [
            { value: 10, name: 'rose1' },
            { value: 5, name: 'rose2' },
            { value: 15, name: 'rose3' },
            { value: 25, name: 'rose4' },
            { value: 20, name: 'rose5' },
            { value: 35, name: 'rose6' },
            { value: 30, name: 'rose7' },
            { value: 40, name: 'rose8' }
          ]
        },
        {
          name: '面积模式',
          type: 'pie',
          radius: [30, 110],
          center: ['75%', '50%'],
          roseType: 'area',
          data: [
            { value: 10, name: 'rose1' },
            { value: 5, name: 'rose2' },
            { value: 15, name: 'rose3' },
            { value: 25, name: 'rose4' },
            { value: 20, name: 'rose5' },
            { value: 35, name: 'rose6' },
            { value: 30, name: 'rose7' },
            { value: 40, name: 'rose8' }
          ]
        }
      ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  </script>
</body>
</html>

舜岳

关注

1
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
【H5】 echarts绘制条形统计图，饼状图

[H5] echarts绘制条形统计图b表格需要引入echarts.js：https://echarts.baidu.com/dist/echarts.min.js效果图如下：引入结构：实例化： echarts.init(document.getElementById(‘main’))option：设置指定图表的配置项和数据setOption(option)：将表显示到页面上...
复制链接

扫一扫

专栏目录