Echarts实战之折线图和条形图（代码）

已于 2024-03-18 10:59:28 修改
阅读量434 收藏 8
点赞数 11
文章标签： echarts html
于 2024-03-12 22:09:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_77751917/article/details/136619167
版权
一、Echarts初始化代码格式

步骤1：引入echarts.js文件
步骤2：准备一个呈现图表的盒子
步骤3：初始化echarts实例对象
步骤4：准备配置项
步骤5：将配置项设置给echarts实例对象

acb7c12e114b43ab9603033cdac98ee5.jpg

 二、折线图（type:'line'）
2.1折线图代码
<!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>Document</title>
  <!-- 步骤1：引入echarts.js文件 -->
  <script src="js/echarts.js"></script>
  <!-- 
  步骤1：引入echarts.js文件
  步骤2：准备一个呈现图表的盒子
  步骤3：初始化echarts实例对象
  步骤4：准备配置项
  步骤5：将配置项设置给echarts实例对象
   -->
</head>

<body>
  <!-- 步骤2：准备一个呈现图表的盒子 -->
  <div style="width: 600px;height: 400px"></div>
  <script>
    // 步骤3：初始化echarts实例对象
    // 参数, dom,决定图表最终呈现的位置
    var mCharts = echarts.init(document.querySelector('div'))
    // 步骤4：准备配置项
    var option = {
    title: {
                text: '成绩',
                subtext: '语文分数',
            },
    tooltip: {
                trigger: 'axis',
            },
      xAxis: {
        type: 'category',
        data: ['小明', '小红', '小王']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '语文',
          type: 'line',
          markPoint: { // 标记点
            data: [
              {
                type: 'max', name: '最大值'
              },{
                type: 'min', name: '最小值'
              }
            ]
          },
          markLine: { // 标记线
            data: [
              {
                type: 'average', name: '平均值'
              }
            ]
          },
          label: { // 柱状图上的文字设置
            show: true, // 是否显示
            rotate: 60, // 旋转角度
            position: 'top' // 显示位置
          },
          barWidth: '30%', // 柱的宽度
          data:[65,84,97] 
        }
      ]
    }
    // 步骤5：将配置项设置给echarts实例对象
    mCharts.setOption(option)
  </script>
</body>
2.2效果显示

1731b89499084748943d94f1d7bc344e.png

2.4将折线图变为堆积图：

<!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>Document</title>
  <!-- 步骤1：引入echarts.js文件 -->
  <script src="js/echarts.js"></script>
  <!-- 
  步骤1：引入echarts.js文件
  步骤2：准备一个呈现图表的盒子
  步骤3：初始化echarts实例对象
  步骤4：准备配置项
  步骤5：将配置项设置给echarts实例对象
   -->
</head>
 
<body>
  <!-- 步骤2：准备一个呈现图表的盒子 -->
  <div style="width: 600px;height: 400px"></div>
  <script>
    // 步骤3：初始化echarts实例对象
    // 参数, dom,决定图表最终呈现的位置
    var mCharts = echarts.init(document.querySelector('div'))
    // 步骤4：准备配置项
    var option = {
        title: {
            show:true,
            text: '成绩',  //主标题
            left:'center',  //居中显示
            borderWidth:'3',  //边框宽度
            borderColor:'blue',
            link:'http://baidu.com',
            textStyle:{
                color:'green',
            },
        },
        tooltip: {
            trigger: 'axis',
        },
        legend: {     //图例组件
            data: ['语文'],
            left:'left',
        },
        toolbox: {
            show: true,
            feature: {
                mark: { show: true },
                dataView: { show: true, readOnly: false },
                magicType: { show: true, type: ['line', 'bar'] },
                restore: { show: true },
                saveAsImage: { show: true },
            },
        },
    calculable: true,
      xAxis: {
        type: 'category',
        data: ['小明', '小红', '小王','小祝']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '语文',
          type: 'line',
          stack:'all',
          areaStyle:{},
          markPoint: { // 标记点
            data: [
              {
                type: 'max', name: '最大值'
              },{
                type: 'min', name: '最小值'
              }
            ]
          },
          markLine: { // 标记线
            data: [
              {
                type: 'average', name: '平均值'
              }
            ]
          },
          label: { // 柱状图上的文字设置
            show: true, // 是否显示
            rotate: 60, // 旋转角度
            position: 'top' // 显示位置
          },
          barWidth: '30%', // 柱的宽度
          data:[65,84,67,100] 
        }
      ]
    }
    // 步骤5：将配置项设置给echarts实例对象
    mCharts.setOption(option)
  </script>
</body>
2.5堆积图效果展示

三、条形图  （type:'bar'）

坐标轴类型的type标签

可选：

  • 'value' 数值轴，适用于连续数据。
  • 'category' 类目轴，适用于离散的类目数据。为该类型时类目数据可自动从 series.data 或dataset.source中取，或者可通过 xAxis.data设置类目数据。
3.1代码

X轴为数值轴，Y轴为类目轴

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8">
        <!--引入EChart脚本-->
        <script src="js/echarts.js"></script>
</head>

    <body>
        <!--为EChart准备一个具备大小（宽高）的DOM-->
        <div id="main" style="width:600px;height:400px"></div>
        <script type="text/javascript">
            //基于准备好的dom,初始化echarts实例
            var myChart=echarts.init(document.getElementById("main"));
            //指定图表的配置项和数据
            var option = {
            title: {
                text: '成绩',
                subtext: '语文分数',
            },
            tooltip: {
                trigger: 'axis',
            },
            legend: {     //图例组件
                data: ['语文'],
            },
            toolbox: {
                show: true,
                feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    magicType: { show: true, type: ['line', 'bar'] },
                    restore: { show: true },
                    saveAsImage: { show: true },
                },
            },
            calculable: true,
            xAxis: [
                {
                    type: 'value',  //设置柱状图
                    boundaryGap: ['1', '1'], 
                   
                },
            ],
            yAxis: [
                {
                    type: 'category',
                    data: ['小红', '小明','小杨'],
                },
            ],
            series: [
        {
          name: '语文',
          type: 'bar',
          markPoint: { // 标记点
            data: [
              {
                type: 'max', name: '最大值'
              },{
                type: 'min', name: '最小值'
              }
            ]
          },
          markLine: { // 标记线
            data: [
              {
                type: 'average', name: '平均值'
              }
            ]
          },
          label: { // 柱状图上的文字设置
            show: true, // 是否显示
            rotate: 60, // 旋转角度
            position: 'top' // 显示位置
          },
          barWidth: '30%', // 柱的宽度
          data:[65,84,97] 
        }
      ]
    }
        
            myChart.setOption(option);
        </script>
    </body>
</html>
3.2条形图效果展示

d91ecc3a0bf6473c99998c3c0906da03.png

四、柱形图（type:'bar'）

X轴为类目轴，Y轴为数值轴

4.1代码

<!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>Document</title>
  <!-- 步骤1：引入echarts.js文件 -->
  <script src="js/echarts.js"></script>
  <!-- 
  步骤1：引入echarts.js文件
  步骤2：准备一个呈现图表的盒子
  步骤3：初始化echarts实例对象
  步骤4：准备配置项
  步骤5：将配置项设置给echarts实例对象
   -->
</head>

<body>
  <!-- 步骤2：准备一个呈现图表的盒子 -->
  <div style="width: 600px;height: 400px"></div>
  <script>
    // 步骤3：初始化echarts实例对象
    // 参数, dom,决定图表最终呈现的位置
    var mCharts = echarts.init(document.querySelector('div'))
    // 步骤4：准备配置项
    var option = {
    title: {
            text: '成绩',
            subtext: '语文分数',
        },
        tooltip: {
            trigger: 'axis',
        },
        legend: {     //图例组件
            data: ['语文'],
        },
        toolbox: {
            show: true,
            feature: {
                mark: { show: true },
                dataView: { show: true, readOnly: false },
                magicType: { show: true, type: ['line', 'bar'] },
                restore: { show: true },
                saveAsImage: { show: true },
            },
        },
    calculable: true,
      xAxis: {
        type: 'category',
        data: ['小明', '小红', '小王']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '语文',
          type: 'bar',
          markPoint: { // 标记点
            data: [
              {
                type: 'max', name: '最大值'
              },{
                type: 'min', name: '最小值'
              }
            ]
          },
          markLine: { // 标记线
            data: [
              {
                type: 'average', name: '平均值'
              }
            ]
          },
          label: { // 柱状图上的文字设置
            show: true, // 是否显示
            rotate: 60, // 旋转角度
            position: 'top' // 显示位置
          },
          barWidth: '30%', // 柱的宽度
          data:[65,84,97] 
        }
      ]
    }
    // 步骤5：将配置项设置给echarts实例对象
    mCharts.setOption(option)
  </script>
</body>
4.2柱状图效果堆积

7a83c56d58564d5089c8cde619a604ea.png

小智张
关注
  • 11
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
非常好用的Echarts饼图和折线图源码Demo
06-14
在公司搭建数据统计时用到的Echarts图表统计插件，源码已经下载了下来，有相关的js和css源文件，感兴趣的朋友可以下载使用！
vue+echarts实现动态折线图的方法与注意
10-14
主要给大家介绍了关于vue+echarts实现动态折线图的方法与注意事项，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
echarts 双折线图 实现 与虚线
05-15
echarts 双折线图 实现 与虚线
echarts多条折线图动态分层的实现方法
10-16
主要介绍了echarts多条折线图动态分层的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Echarts动态加载多条折线图的实现代码
10-16
主要介绍了Echarts动态加载多条折线图的实现代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
js如何使用Echarts详解
wangxuanyang_zer的博客
10-22 807
首先，在您的HTML文件中，确保已经包含了ECharts库的JavaScript文件。您可以从ECharts官方网站下载并引入它。在HTML中，创建一个元素来容纳图表。给该元素指定一个唯一的ID，以便在JavaScript中引用它。同时，通过CSS设置容器的宽度和高度，以定义图表的尺寸。使用JavaScript来创建和配置图表。
echarts入门图表可视化（基本介绍+示例代码）
最新发布
weixin_45594172的博客
11-21 1204
echarts入门图表可视化（基本介绍+示例代码）
js中ECharts基础
weixin_46048542的博客
11-11 7549
ECharts是一个使用JavaScript 实现的开源可视化库，可以流畅的运行在PC 和移动设备上，兼容当前绝大部分浏览器(IE8/9/10/11，Chrome,t Firefox，Safari等) ，底层依赖矢量图形库ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
94Echarts - 地理坐标/地图（Use lines to draw 1 million ny streets.）
阿甘兄
05-05 478
效果图 源代码 var CHUNK_COUNT = 32; var dataCount = 0; function fetchData(idx) { if (idx >= CHUNK_COUNT) { return; } var dataURL = `data/asset/data/links-ny/links_ny_${idx}.bin`; ...
【echarts&js】echarts实现数据折线图等常见可视化；以及三个案例，附带源码
weixin_52479803的博客
08-01 1700
【echarts&js】echarts实现数据折线图等常见可视化；以及三个案例，附带源码
echarts.js源码
10-31
本资源为echarts.js源码包，可以直接在html中导入，有需要的可以下载一下。
echarts最新版js文件
11-22
echarts是一个专注于图表绘制的一个插件，可以实现高度可定制，此js为2018年11月22日前最新版，大家放心下载
echarts实现折线图的拖拽效果
10-15
主要为大家详细介绍了echarts实现折线图的拖拽效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
echarts柱状图饼图折线图.zip
07-31
echarts 电脑端 柱状图 折线图 饼图 散点图 js html
Echarts：基础折线图（含异步加载数据）
12-04
Echarts基础折线图源代码，对于数据源的读取有两种方式：直接定义数据源和异步加载数据，异步加载数据以读取json/js数据为主。
echarts温度折线统计图
11-08
echarts温度折线统计图 echarts温度折线统计图 echarts温度折线统计图 echarts温度折线统计图
Layer+Echarts构建弹出层折线图的方法
10-16
今天小编就为大家分享一篇Layer+Echarts构建弹出层折线图的方法，具有很的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
echart基础代码
weixin_42407059的博客
05-11 222
自用方便
java生成echarts图片
09-27
要使用Java生成echarts图片，可以使用Java的开源库echarts-java。该库提供了Java与echarts的集成，可以通过Java代码生成echarts图表，并将其保存为图片。 首先，需要在项目中导入echarts-java的依赖，可以使用Maven或Gradle进行管理。 在代码中，首先创建一个echarts对象，通过设置不同的属性来配置图表的内容和样式。例如，可以设置图表类型、标题、横纵坐标等。 然后，可以创建一个echarts图片生成器对象，将echarts对象作为参数传递给生成器。可以设置生成图片的格式、大小和保存路径等。 最后，调用生成器的generate方法，即可根据echarts对象生成相应的图片并保存。 以下是一个简单的示例代码： ```java import com.github.abel533.echarts.Option; import com.github.abel533.echarts.json.GsonOption; import com.github.abel533.echarts.utils.EchartsUtils; import com.github.abel533.echarts.util.EnhancedOption; import com.github.abel533.echarts.image.ZEChartsConfig; import com.github.abel533.echarts.image.ZEChartsRenderTool; public class EchartsImageGenerator { public static void main(String[] args) { // 创建echarts对象 EnhancedOption option = new EnhancedOption(); option.title().text("示例图表"); option.legend().data("A", "B"); option.xAxis().data("1月", "2月", "3月", "4月", "5月"); option.yAxis().name("销量"); // 添加数据系列 option.series("A", "bar", new Integer[]{10, 20, 30, 40, 50}); option.series("B", "line", new Integer[]{5, 10, 15, 20, 25}); // 创建echarts图片生成器对象 ZEChartsConfig config = new ZEChartsConfig(); config.setRenderTool(ZEChartsConfig.getRenderToolOrInstance()); config.setImagePath("data:image/png;base64"); config.setCharsetName("UTF-8"); ZEChartsRenderTool renderTool = new ZEChartsRenderTool(); renderTool.setConfig(config); // 生成图片并保存 String outputPath = "path/to/output/image.png"; renderTool.renderToPath(EchartsUtils.getInstanceFromOption(option, GsonOption.class), outputPath); } } ``` 通过上述代码，我们可以利用Java调用echarts-java库来生成echarts图片。可以根据实际需求，使用不同的图表类型和数据来定制生成的图片。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值