Echarts整合

最新推荐文章于 2023-10-16 08:31:24 发布
最新推荐文章于 2023-10-16 08:31:24 发布
阅读量226 收藏
点赞数 1
分类专栏： ECharts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yuzheh521/article/details/110150058
版权

Echarts-基础配置

文档GIt地址
需要了解的主要配置：series xAxis yAxis grid tooltip title legend color

series

系列列表。每个系列通过 type 决定自己的图表类型
大白话：图标数据，指定什么类型的图标，可以多个图表重叠。

xAxis：直角坐标系 grid 中的 x 轴

boundaryGap: 坐标轴两边留白策略 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。

**yAxis：**直角坐标系 grid 中的 y 轴

**grid：**直角坐标系内绘图网格。

**title：**标题组件

**tooltip：**提示框组件

**legend：**图例组件

**color：**调色盘颜色列表
数据堆叠，同个类目轴上系列配置相同的 stack 值后 后一个系列的值会在前一个系列的值上相加。

option = {
    // color设置我们线条的颜色 注意后面是个数组
    color: ['pink', 'red', 'green', 'skyblue'],
    // 设置图表的标题
    title: {
        text: '折线图堆叠123'
    },
    // 图表的提示框组件 
    tooltip: {
        // 触发方式
        trigger: 'axis'
    },
    // 图例组件
    legend: {
       // series里面有了 name值则 legend里面的data可以删掉
    },
    // 网格配置  grid可以控制线形图 柱状图 图表大小
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        // 是否显示刻度标签 如果是true 就显示 否则反之
        containLabel: true
    },
    // 工具箱组件  可以另存为图片等功能
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    // 设置x轴的相关配置
    xAxis: {
        type: 'category',
        // 是否让我们的线条和坐标轴有缝隙
        boundaryGap: false,
        data: ['星期一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
     // 设置y轴的相关配置
    yAxis: {
        type: 'value'
    },
    // 系列图表配置 它决定着显示那种类型的图表
    series: [
        {
            name: '邮件营销',
            type: 'line',
           
            data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
            name: '联盟广告',
            type: 'line',

            data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
            name: '视频广告',
            type: 'line',
          
            data: [150, 232, 201, 154, 190, 330, 410]
        },
        {
            name: '直接访问',
            type: 'line',
          
            data: [320, 332, 301, 334, 390, 330, 320]
        }
    ]
};

柱状图图表（两大步骤）

// 柱状图1模块
(function() {
  // 实例化对象
  let myChart = echarts.init(document.querySelector(".bar .chart"));
  // 指定配置和数据
  let option = {
    color: ["#3398DB"],
    tooltip: {
      trigger: "axis",
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
      }
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true
    },
    xAxis: [
      {
        type: "category",
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        axisTick: {
          alignWithLabel: true
        }
      }
    ],
    yAxis: [
      {
        type: "value"
      }
    ],
    series: [
      {
        name: "直接访问",
        type: "bar",
        barWidth: "60%",
        data: [10, 52, 200, 334, 390, 330, 220]
      }
    ]
  };

  // 把配置给实例对象
  myChart.setOption(option);
})();

根据需求定制

修改图表柱形颜色 #2f89cf

修改图表大小 top 为 10px bottom 为 4% grid决定我们的柱状图的大小

color: ["#2f89cf"],
grid: {
  left: "0%",
  top: "10px",
  right: "0%",
  bottom: "4%",
  containLabel: true
},

X轴相关设置 xAxis

文本颜色设置为 rgba(255,255,255,.6) 字体大小为 12px
X轴线的样式 不显示

// x轴的文字颜色和大小 axisLabel: { color: “rgba(255,255,255,.6)”, fontSize: “12” }, // x轴样式不显示 axisLine: { show: false // 如果想要设置单独的线条样式 // lineStyle: { // color: “rgba(255,255,255,.1)”, // width: 1, // type: “solid” } }

- Y 轴相关定制
  - 文本颜色设置为   rgba(255,255,255,.6)   字体大小为 12px
  - Y 轴线条样式 更改为  1像素的  rgba(255,255,255,.1) 边框
  - 分隔线的颜色修饰为  1像素的  rgba(255,255,255,.1)   

~~~JavaScript
// y 轴文字标签样式
axisLabel: {
      color: "rgba(255,255,255,.6)",
       fontSize: "12"
},
 // y轴线条样式
 axisLine: {
      lineStyle: {
         color: "rgba(255,255,255,.1)",
         // width: 1,
         // type: "solid"
      }
5232},
 // y 轴分隔线样式
splitLine: {
    lineStyle: {
       color: "rgba(255,255,255,.1)"
     }
}

修改柱形为圆角以及柱子宽度 series 里面设置

series: [
      {
        name: "直接访问",
        type: "bar",
        // 修改柱子宽度
        barWidth: "35%",
        data: [10, 52, 200, 334, 390, 330, 220],
        itemStyle: {
          // 修改柱子圆角
          barBorderRadius: 5
        }
      }
    ]
  };

让图表跟随屏幕自适应

 window.addEventListener("resize", function() {
    myChart.resize();
  });

柱状图2定制

需求1： 修改图形大小 grid

// 图标位置
    grid: {
      top: "10%",
      left: "22%",
      bottom: "10%"
    },

需求2： 不显示x轴

  xAxis: {
      show: false
    },

需求3： y轴相关定制

不显示y轴线和相关刻度

//不显示y轴线条
axisLine: {
    show: false
        },
// 不显示刻度
axisTick: {
   show: false
},

y轴文字的颜色设置为白色

   axisLabel: {
          color: "#fff"
   },

需求4： 修改第一组柱子相关样式（条状）

name: "条",
// 柱子之间的距离
barCategoryGap: 50,
//柱子的宽度
barWidth: 10,
// 柱子设为圆角
itemStyle: {
    normal: {
      barBorderRadius: 20,       
    }
},

设置第一组柱子内百分比显示数据

// 图形上的文本标签
label: {
    normal: {
         show: true,
         // 图形内显示
         position: "inside",
         // 文字的显示格式
         formatter: "{c}%"
     }
},

设置第一组柱子不同颜色

// 声明颜色数组
var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
// 2. 给 itemStyle  里面的color 属性设置一个 返回值函数
  itemStyle: {
          normal: {
            barBorderRadius: 20,  
            // params 传进来的是柱子对象
            console.log(params);
            // dataIndex 是当前柱子的索引号
            return myColor[params.dataIndex];
          }
         
},

需求5： 修改第二组柱子的相关配置（框状）

   name: "框",
        type: "bar",
        barCategoryGap: 50,
        barWidth: 15,
        itemStyle: {
            color: "none",
            borderColor: "#00c1de",
            borderWidth: 3,
            barBorderRadius: 15
        },
        data: [19325, 23438, 31000, 121594, 134141, 681807]
      }

完整样式案例

// 柱状图2
(function() {
  var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
  // 1. 实例化对象
  var myChart = echarts.init(document.querySelector(".bar2 .chart"));
  // 2. 指定配置和数据
  var option = {
    grid: {
      top: "10%",
      left: "22%",
      bottom: "10%"
      // containLabel: true
    },
    // 不显示x轴的相关信息
    xAxis: {
      show: false
    },
    yAxis: [
      {
        type: "category",
        inverse: true,
        data: ["HTML5", "CSS3", "javascript", "VUE", "NODE"],
        // 不显示y轴的线
        axisLine: {
          show: false
        },
        // 不显示刻度
        axisTick: {
          show: false
        },
        // 把刻度标签里面的文字颜色设置为白色
        axisLabel: {
          color: "#fff"
        }
      },
      {
        data: [702, 350, 610, 793, 664],
        inverse: true,
        // 不显示y轴的线
        axisLine: {
          show: false
        },
        // 不显示刻度
        axisTick: {
          show: false
        },
        // 把刻度标签里面的文字颜色设置为白色
        axisLabel: {
          color: "#fff"
        }
      }
    ],
    series: [
      {
        name: "条",
        type: "bar",
        data: [70, 34, 60, 78, 69],
        yAxisIndex: 0,
        // 修改第一组柱子的圆角
        itemStyle: {
          barBorderRadius: 20,
          // 此时的color 可以修改柱子的颜色
          color: function(params) {
            // params 传进来的是柱子对象
            console.log(params);
            // dataIndex 是当前柱子的索引号
            return myColor[params.dataIndex];
          }
        },
        // 柱子之间的距离
        barCategoryGap: 50,
        //柱子的宽度
        barWidth: 10,
        // 显示柱子内的文字
        label: {
          show: true,
          position: "inside",
          // {c} 会自动的解析为 数据  data里面的数据
          formatter: "{c}%"
        }
      },
      {
        name: "框",
        type: "bar",
        barCategoryGap: 50,
        barWidth: 15,
        yAxisIndex: 1,
        data: [100, 100, 100, 100, 100],
        itemStyle: {
          color: "none",
          borderColor: "#00c1de",
          borderWidth: 3,
          barBorderRadius: 15
        }
      }
    ]
  };

  // 3. 把配置给实例对象
  myChart.setOption(option);
})();
yzhSWJ
关注
专栏目录
Echart最新整合版
11-01
最新版本，引入其中一个即可，最小的是精简版，最大的是完整版源码
echarts整合多个类似option的方法实例
08-27
ECharts 整合多个类似 Option 的方法实例 ECharts 是一个基于 JavaScript 的开源图表库，提供了大量的图表类型和配置选项。然而，在实际应用中，我们经常需要整合多个类似 Option 的方法实例，以满足不同的图表需求...
整合echarts实例
qq_41835813的博客
08-02 358
安装echarts 官网：https://echarts.apache.org/zh/index.html npm install echarts --save 如果出现报错err参考：https://blog.csdn.net/weixin_42711399/article/details/84350368 配置URL import axios from 'axios' const service = axios.create({ baseURL: 'http://192.168.32..
Echarts整合(前后端、数据库)
码农桃子的博客
06-30 1221
官方网站：https://echarts.apache.org/examples/zh/index.html 一、前端 0.安装echarts npm install echarts --save 1.编写html 用来显示图表 ```html ``` 触发显示图标的按钮 html <el-button :disabled="btnDisabled" type="p...
VUE整合Echarts实现简单的数据可视化
最新发布
心态的博客
10-16 1万+
ECharts是一款功能强大的前端数据可视化库，支持多种图表类型和统计图表、地理数据可视化、关系型数据展示、多维数据处理和商业智能功能。通过广泛的图表类型、统计分析能力、地理数据可视化、关系数据展示、多维数据处理和商业智能功能，ECharts为用户提供了强大而灵活的数据可视化解决方案，助力用户从数据中获取洞见，并将其直观地展示出来。
Spring boot 整合Echarts
面向未来
10-27 765
使用官方下载，当前最新为5.2.1 下载 - Apache ECharts 示例学习： Examples - Apache ECharts 因为只是做了简单折线图， 下面是HTML代码 <body> <div class="col-sm-12 " > <div id="temperatureChart" class="col-sm-6" style="height: 400px;width: 50%">
Java birt和echarts整合
04-22
提供的"Java Birt和echarts整合.pdf"文档可能包含具体的整合步骤、示例代码或配置细节，对于理解和实践这个过程会有很大帮助。建议仔细阅读这份文档，按照指南进行操作，以成功实现两者的整合。
ExtJs整合Echarts的示例代码
10-18
在整合Echarts和ExtJs时，我们通常会利用ExtJs的面板（Panel）组件来布局和管理页面元素。例如，我们可以创建一个新的面板，并在其内部包含两个div，一个用于展示Echarts图表，另一个用于显示表格数据。以下是一个...
birt和echarts整合
05-25
当BIRT与ECharts整合时，我们可以利用BIRT的报告设计能力和ECharts的图表渲染能力，创建出更具吸引力和交互性的报表。以下是一些关于如何整合这两者的知识点： 1. **ECharts嵌入BIRT报告**：在BIRT报告设计中，可以...
Vue——整合EChart
无限迭代中......
04-06 1335
解决方案 <template> <div :style="{ height: height, width: width }" /> </template> <script lang="ts"> import { defineComponent } from 'vue' export default defineComponent({ name: 'ECharts', }) </script> <script lang="ts"
Birt与Echarts集成.pdf
06-24
附件详细描述了Birt与Echarts集成的具体步骤，包含各操作步骤截图，及源代码。
div 左右排列 高度自适应_echarts高度自适应
weixin_39604280的博客
11-29 221
测试提了bug，柱状图数据多的情况下，都叠到了一起，效果如下图。要解决这个bug，首先想到的是让柱状图的容器自适应高度。于是，把原本div上写固定的高度去掉。<div id="myChart1" :style="{height:'600px',width:'650px'}" class="chart-css" ref="myEchart1"> </div>变成： &lt...
echarts高度自适应
海风依旧
01-01 9817
echarts高度自适应，echarts图如何自适应高度？
Echarts高度自适应
qq_1872583947的博客
04-30 2170
在开发数据大屏的时候，有需求要求echarts图表能自适应宽度和高度 原理： 在监听页面大小变化的时候，先监听echarts父级元素的高度变化，计算出echarts的高度，然后再调用echarts的resize函数 关键代码 window.addEventListener("resize", () => { if (this.subItemsEcharts) { // 计算echarts高度 this.setEchartsHeight('sub-items', 'sub-ite
Echarts中的高度自适应
Monster_MY的博客
11-04 1万+
移动端Echarts高度自适应 最近做一个h5页面，需要嵌入app进行使用；用到echarts绘制图像，同时页面底部有操作按钮对图像进行控制。产品希望所有内容在一个页面内完整显示，而不需要滑动。。 根据echarts文档，图像容器需要具有固定的宽高才可以进行显示，但是在移动端，屏幕大小不尽相同，需要动态宽高解决适配问题。 1. 图像根据窗口大小自适应 利用 echarts中的resize()方法。这种方式很常见，下面是自己vue项目中的一段： const myChartId = document.ge
Echarts图表自适应宽高大小
剑雪封喉
06-06 7789
近项目用到了Echarts,他要求在容器上以行内样式固定宽高。这就无法按照浏览器大小进行自适应调整。经过一番纠结发现了解决方法. 官网描述的截图如下： 这个鬼东西，简直是反人类的设定好吗。这都什么年代了不能自适应的网站是不可以滴。我在这个项目使用的是百分比布局。 先说下整体的思路，就是在Echarts的容器外面套一个盒子来自适应屏幕大小，然后用js获取盒子宽高在赋值给Echarts容器。 ...
echarts 图标高度自适应_Echarts图表实现自适应
weixin_29359001的博客
01-14 1615
在大数据时代，数据的可视化对前端提出了更高的要求，大佬们的团队提供了各色各样的插件，Echarts、HightCharts、D3.js，今天在做响应式后台管理系统时需要对Echarts图表进行自适应。原理很简单，在浏览器窗口变化时调用Echarts提供的resize方法，详见官方文档，该方法的描述是：改变图表尺寸，在容器大小发生改变时需要手动调用。这就需要你的外部容器也是自适应的。详见示例代码：*...
echarts自适应
天空影
06-28 2060
原始样子 设置宽度不定，也就是想要它自适应 &lt;div id="bars" style="width: 100%;height:560px;"&gt;&lt;/div&gt; 手动缩放后 我手动把浏览器宽度缩小后 可以看到，宽度并不会随左边宽度改变而改变。 解决方法 因为echarts没有内置自适应方法，所以需要自己手动添加 window.addEventListene...
echarts实现自适应高度
yao632305843的博客
09-02 1370
当后台数据过多时，条状图都凑在了一起每一条变得很窄 通过查看echarts的API发现 可以给实例设置高度 直接放代码 let length = projectName.length; let myChart = this.reactEcharts && this.reactEcharts.getEchartsInstance(); myChart.resize({ height: length * 100 + 100 }); <ReactEcharts .
Echarts整合百度地图详细步骤
"这篇文章主要介绍了如何在ECharts 4.0中使用百度地图，包括所需的JavaScript库引入和地理坐标映射的设置。" ECharts是一个由百度开发的开源JavaScript图表库，它提供了丰富的可视化图表类型，如折线图、柱状图、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

yzhSWJ

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值