echarts简单案例

已于 2024-03-19 11:34:03 修改
阅读量656 收藏 5
点赞数
分类专栏： echarts 文章标签： echarts 前端 javascript
于 2022-06-30 17:39:40 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_65912225/article/details/125545086
版权

目录

一 横向柱状图

 二 竖向柱状图

 三 折线图

 四.渐变

 五 环状图

一 横向柱状图

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="echarts.min.js"></script>
    <style>
        #main {
            height: 800px;
            float: right;
        }
    </style>
</head>

<body>
    <!-- 为echarts准备一个具备大小宽高的dom -->
    <div id="main" style="width:50%"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById("main"))
        // 指定图表的配置项和数据  
        var option = {
            title: {
                text: '标题'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    // type: 'shadow'
                }
            },
            legend: {
                data: ["a", "b"]
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                boundaryGap: [0, 0.01],
            },
            yAxis: {
                type: 'category',
                data: ['a', "b", "c", "d", "e", "f"]
            },
            series: [
                {
                    name: 'a',
                    type: 'bar',
                    stack: 'b',
                    label: {
                        // show: true
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    barWidth: 60,
                    data: [120, 132, 101, 134, 90, 230, 210]
                },
                {
                    name: 'b',
                    type: 'bar',
                    stack: 'b',
                    emphasis: {
                        focus: 'series'
                    },
                    barWidth: 60,
                    data: [300, 400, 500, 600, 700, 800]
                }
            ]
        };
        // 使指定的配置配置项和数据显示图表
        option && myChart.setOption(option);
    </script>
</body>

</html>

 二 竖向柱状图

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="echarts.min.js"></script>
    <style>
        #main {
            height: 800px;
            float: right;
        }
    </style>
</head>

<body>
    <!-- 为echarts准备一个具备大小宽高的dom -->
    <div id="main" style="width:50%"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById("main"))
        // 指定图表的配置项和数据  
        var option = {
            title: {
                text: "标题"
            },
            color: ['#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
            legend: {
                data: ["a", "b"]
            },
            xAxis: {
                type: 'category',
                data: ['a', 'b', "c", "d","e","f","g","h",]
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: "a",
                    type: 'bar',
                    stack: 'a',
                    data: [500, 800, 1200, 800,500, 800, 1200, 800],
                    barWidth: 60
                },
                {
                    name: "b",
                    type: 'bar',
                    stack: 'a',
                    data: [510, 810, 1210, 810,510, 810, 1210, 810],
                    barWidth: 60

                },


            ]
        };
        // 使指定的配置配置项和数据显示图表
        option && myChart.setOption(option);
    </script>
</body>

</html>

 三 折线图

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="echarts.min.js"></script>
    <style>
        #main {
            height: 800px;
            float: right;
        }
    </style>
</head>

<body>
    <!-- 为echarts准备一个具备大小宽高的dom -->
    <div id="main" style="width:50%"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById("main"))
        // 指定图表的配置项和数据  
        var option = {
  title: {
    text: '标题'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  legend: {
    data: ["a","b"]
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: 'a',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: 'b',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [220, 182, 191, 234, 290, 330, 310]
    },
   
  ]
};
        // 使指定的配置配置项和数据显示图表
        option && myChart.setOption(option);
    </script>
</body>

</html>

 

 

 四.渐变

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="echarts.min.js"></script>
  <style>
    #main {
      height: 800px;
      float: right;
    }
  </style>
</head>

<body>
  <!-- 为echarts准备一个具备大小宽高的dom -->
  <div id="main" style="width:60%"></div>
  <script type="text/javascript">
    var myChart = echarts.init(document.getElementById("main"))
    // 指定图表的配置项和数据  
    var option = {
      color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
      title: {
        text: '标题'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985'
          }
        }
      },
      legend: {
        data: ['Line 1', 'Line 2']
      },
      toolbox: {},
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          boundaryGap: false,
          data: ["a", "b", "c", "d", "e", "f", "g","a", "b", "c", "d", "e", "f", "g"]
        }
      ],
      yAxis: [
        {
          type: 'value'
        }
      ],
      series: [
        {
          name: 'Line 1',
          type: 'line',
          stack: 'Total',
          smooth: true,
          lineStyle: {
            width: 0
          },
          showSymbol: false,
          lineStyle: {
            color: 'rgb(128, 255, 165)',
            width: 2
          },
          areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgb(128, 255, 165)'
              },
              {
                offset: 1,
                color: 'transparent'
              }
            ])
          },
          emphasis: {
            focus: 'series'
          },
          data: [140, 232, 101, 264, 90, 340, 250,140, 232, 101, 264, 90, 340, 250]
        },
        {
          name: 'Line 2',
          type: 'line',
          stack: 'Total',
          smooth: true,
          showSymbol: false,
          lineStyle: {
            color: 'rgb(77, 119, 255)',
            width: 2
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0, color: 'rgb(77, 119, 255)' 
              }, {
                offset: 1, color: 'transparent'
              }]
              ),
            },
          },
          emphasis: {
            focus: 'series'
          },
          data: [120, 282, 111, 234, 220, 340, 310,120, 282, 111, 234, 220, 340, 310]
        },

      ]
    };
    // 使指定的配置配置项和数据显示图表
    option && myChart.setOption(option);
  </script>
</body>

</html>

 五 环状图

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="echarts.min.js"></script>
  <style>
    #main {
      height: 800px;
      float: right;
    }
  </style>
</head>

<body>
  <!-- 为echarts准备一个具备大小宽高的dom -->
  <div id="main" style="width:90%"></div>
  <script type="text/javascript">
    var myChart = echarts.init(document.getElementById("main"))
    // 指定图表的配置项和数据  
    var option = {
  dataset: [
    {
      source: [
        ['Product', 'Sales', 'Price', 'Year'],
        ['a', 123, 32, 2011],
        ['b', 231, 14, 2011],
        ['c', 235, 5, 2011],
        ['d', 341, 25, 2011],
        ['f', 122, 29, 2011],
        ['a', 143, 30, 2012],
        ['b', 201, 19, 2012],
        ['c', 255, 7, 2012],
        ['d', 241, 27, 2012],
        ['f', 102, 34, 2012],
        ['a', 153, 28, 2013],
        ['b', 181, 21, 2013],
        ['c', 395, 4, 2013],
        ['d', 281, 31, 2013],
        ['f', 92, 39, 2013],
        ['a', 223, 29, 2014],
        ['b', 211, 17, 2014],
        ['c', 345, 3, 2014],
        ['d', 211, 35, 2014],
        ['f', 72, 24, 2014]
      ]
    },
    {
      transform: {
        type: 'filter',
        config: { dimension: 'Year', value: 2011 }
      }
    },
    {
      transform: {
        type: 'filter',
        config: { dimension: 'Year', value: 2012 }
      }
    },
  ],
  series: [
    {
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '40',
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      datasetIndex: 1
    },
    {
      type: 'pie',
      radius: 50,
      center: ['50%', '75%'],
      datasetIndex: 2
    }
  ],
  media: [
    {
      // query: { minAspectRatio: 1 },
      option: {
        series: [
          { center: ['35%', '40%'] },
          { center: ['35%', '40%'] },
        ]
      }
    },
    // {
    //   option: {
    //     series: [
    //       { center: ['50%', '25%'] },
    //       { center: ['50%', '50%'] },
    //     ]
    //   }
    // }
  ]
};
    // 使指定的配置配置项和数据显示图表
    option && myChart.setOption(option);
  </script>
</body>

</html>

卷心菜007
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Java面试基础篇
m0_67392010的博客
07-29 3691
先自我介绍一下，小编13年上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，18年进入阿里，直到现在。深知大多数初中级java工程师，想要升技能，往往是需要自己摸索成长或是报班学习，但对于培训机构动则近万元的学费，着实压力不小。因此我收集了一份《java开发全套学习资料》送给大家，初衷也很简单，就是希望帮助到想自学又不知道该从何学起的朋友，同时减轻大家的负担。Java的强引用、弱引用、软引用、虚引用。Java语言基础常识。Java12新特性。JavaIO详解。...
Echart 的实例
csdn_chenli
05-26 5484
这是我自己做的一些实例  有Echarts 部分属性的注释 学习网站：http://echarts.baidu.com/index.html ECharts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 Canvas 类库 ZRender，提供直
ECharts案例大全（最新版），含各种案例！实例！
djemx2025的博客
05-30 654
以上就是本文的全部内容，整理提供了三种方案来解决因ECharts官网原案例大全社区Make A Pie因关停给开发者带来的不利。方法一：不过不要慌张，本着遇到问题就解决问题的干劲，社区动力大佬为大家重新整理了一份几乎和原Make A Pie一样的ECharts案例大全资源库。方法三：当然，本人也对之前Make A Pie社区的所有ECharts案例爬了一遍，将资源都上传至百度云，有需要的朋友可以自行下载完整的案例资源。方法二：也是某位大佬整理的ECharts案例大全资源库（基于Make A Pie。
【Echarts】使用及应用案例
最新发布
每天進步一點點
06-26 1237
第一种引入方式：把下载好的echarts.js 文件存放到js文件下，通过script标签的src属性引入。min:压缩 ，省去空格、换行，所有的代码在一行中书写。// 基于准备好的dom，初始化echarts实例。// 基于准备好的dom，初始化echarts实例。未压缩：保留的空格、换行。// 使用刚指定的配置项和数据显示图表。// 使用刚指定的配置项和数据显示图表。// 指定图表的配置项和数据。// 指定图表的配置项和数据。//鼠标指向柱状图浮出详情。//鼠标指向柱状图浮出详情。
echarts完整实例
10-20
这是我实际项目中的一个echarts完整实例，将echarts数值通过json方式从后台数据库中读取。
ECharts案例
2303_77733754的博客
03-12 742
xAxis: {name: 'X轴标题',data: ['数据1', '数据2', '数据3']},yAxis: {name: 'Y轴标题',},series: [{}]
echarts地图案例
01-30
在本文中，我们将深入探讨如何使用ECharts库创建一个简单地图案例。ECharts是一款基于JavaScript的数据可视化库，提供了丰富的图表类型和强大的交互功能，适用于Web端的数据展示。地图是ECharts的一个重要功能，它...
echarts小案例
04-20
**ECharts小案例详解** ECharts是一款由百度开发的开源JavaScript数据可视化库，它提供了丰富的图表类型，如柱状图、折线图、饼图、散点图等，且支持自定义交互和动画效果，广泛应用于Web数据分析和展示。本案例...
基于ECharts数据可视化大屏案例源码
12-03
在“基于ECharts数据可视化大屏案例源码”中，我们可以学习到以下几个关键知识点： 1. **ECharts基础使用**：了解如何引入ECharts库，设置图表容器，以及初始化图表。这包括配置项的设置，如`title`、`legend`、`...
Echarts制作饼状图案例
06-26
本案例主要关注如何使用ECharts来创建饼状图。 饼状图是一种常用的数据可视化工具，用于展示数据的构成比例。在ECharts中，饼状图可以清晰地展示每个分类所占总体的比例，非常适合用来对比不同类别在整体中的占比。...
Echarts封装案例.zip
05-04
本压缩包“Echarts封装案例.zip”包含了一个封装好的ECharts JS文件以及一些简单的使用案例，旨在帮助用户快速理解和应用ECharts。 首先，我们要理解“Echarts封装”的概念。封装是指将ECharts的基本功能和方法进行...
Echarts实例
11-29
简单的Echars使用小demo,解压后，直接点html便可以看到效果
echarts实例
08-29
输入数据会形成表格装数据,同时数据会形成对应的统计图,还可以选择统计图的类型.
echart案例之一
05-14
echart案例,给初学者提供方便的学习机会,简单易懂, 很快掌握!
echart 实例
11-16
各个图标的实例
Echart报表实现的Demo案例
05-31
Echart报表实现的Demo案例，看懂了其他都会了。 使用方法详解参考： https://blog.csdn.net/qq_36410795/article/details/80520786
ECharts案例大全（最新版），含各种案例，实例。
热门推荐
您的博客
02-07 3万+
前言：2022年2月以前，ECharts官网除了提供官方案例外，还额外提供了一个ECharts案例资源丰富的强大社区MakeA Pie来展示各类的ECharts案例。这对于广大开发者，特别是前端页面仔们来说简直是个福音网站。然后，现在却因无人维护，该社区被停用了。 这一停用无疑给广大ECharts使用者们带来一阵阴影（ps：要是遇上复杂的ECharts图标需求，那不得每次都是重头画起。呜呜~~） 方法一：不过不要慌张，本着遇到问题就解决问题的干劲，社区动力大佬为大家重新整理了一份几乎和原MakeA...
echarts 基础图形使用
xin_yun_Jian的博客
10-27 403
1. 安装 npm install echarts --save2. 定义标签容器 <div id="main" style="width: 600px; height: 400px"></div> 3. 引入 import * as echarts from "echarts"; 4. 柱状图 initBar() { var myCha...
用vue写一个echarts简单案例
08-19
总结起来，使用Vue和Echarts可以很容易地实现一个简单的数据可视化案例。通过结合Vue的组件思想和数据驱动的特点，以及Echarts强大的图表功能和灵活的配置方式，我们可以快速开发出各种复杂、美观的数据可视化应用。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值