准备三个Echarts图表，包括该表常用属性、取值范围、及使用注意事项！

M小慕同学

于 2024-05-15 22:59:57 发布

阅读量316

点赞数 9

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/m0_65230676/article/details/138925492

版权

ECharts 是百度制作的一个使用 JavaScript 实现的开源可视化库，它可以运行在浏览器和 Node.js 环境中，提供了常见的图表功能。
在使用 ECharts 绘制各种图表时，了解其常用的方法属性及注意事项是非常有帮助的。以下是一些常用的 ECharts 配置项和它们的注意事项：
//title：图表的标题，可以通过 text 设置标题内容，subtext 设置副标题内容。
//tooltip：提示框，显示当前鼠标所指的数据信息，可以通过 trigger 设置触发类型。
//legend：图例，用于展示不同系列的标记、颜色和名称，可以通过 data 设置图例的数据。
//xAxis 和 yAxis：坐标轴，可以通过 type 设置坐标轴类型，data 设置坐标轴数据。
//series：系列列表，每个系列通过 type 设置图表类型，data 设置系列数据。
//toolbox：工具箱，提供图表的导出，数据视图，动态类型切换等功能。
color：全局的颜色配置，影响图表中不同系列的颜色。
在使用 ECharts 绘制图表时，确保图表实例已经正确初始化，并且所有的配置项都符合 ECharts 的规范。此外，不同类型的图表可能需要不同的配置项，需要根据具体的图表类型选择合适的配置。
1.柱状图

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="echarts.js"></script>
  </head>
  <body>
    <!-- 为 ECharts 准备一个定义了宽高的 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: {
//title：图表的标题，可以通过 text 设置标题内容，subtext 设置副标题内容。
          text: 'ECharts 入门示例'  },
        tooltip: {},
//tooltip：提示框，显示当前鼠标所指的数据信息，可以通过 trigger 设置触发类型。
        legend: {
//legend：图例，用于展示不同系列的标记、颜色和名称，可以通过 data 设置图例的数据。
          data: ['销量']  },
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']  },
        yAxis: {},
//xAxis 和 yAxis：坐标轴，可以通过 type 设置坐标轴类型，data 设置坐标轴数据。
        series: [
//series：系列列表，每个系列通过 type 设置图表类型，data 设置系列数据。{
            name: '销量',
            type: 'bar',pie饼图图表类型，pie-饼图，line-折线图，bar-柱状图，map-地图
            data: [5, 20, 36, 10, 10, 20]  } ]  };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    </script>
  </body>
</html>

2.折线图
ECharts 折线图是一种常用的数据可视化图表，在使用时需要注意以下几点：
确保在使用 ECharts 之前已经正确引入了 ECharts 的库文件。
正确设置图表的容器大小，确保图表能够在指定的容器内正确显示。
准备数据，折线图需要 X 轴（category）和 Y 轴（value）的数据，确保数据格式正确。
初始化图表并设置相关的配置项，如标题（title）、图例（legend）、坐标轴（xAxis/yAxis）、系列（series）等。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="echarts.js"></script>
  </head>
  <body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));
      // 指定图表的配置项和数据
      option = {
      title: {
      //title：图表的标题，可以通过 text 设置标题内容，subtext 设置副标题内容。
      text: 'Stacked Line'},
      tooltip: {
      //tooltip：提示框，显示当前鼠标所指的数据信息，可以通过 trigger 设置触发类型。
      trigger: 'axis'},
      legend: {
      //legend：图例，用于展示不同系列的标记、颜色和名称，可以通过 data 设置图例的数据。
      data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'] },
      grid: {//调整图表与容器四边的距离
      客观上影响了图表的大小
      left: '3%',
      right: '4%',
      bottom: '3%',//grid 组件离容器下侧的距离。
      //bottom 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比。
      containLabel: true//grid 区域是否包含坐标轴的刻度标签。取值为true/false常用于『防止标签溢出』的场景},
      toolbox: {
      //toolbox：工具箱，提供图表的导出，数据视图，动态类型切换等功能。
      feature: {
      saveAsImage: {}//保存为图片。 } },
      xAxis: {
      //xAxis 和 yAxis：坐标轴，可以通过 type 设置坐标轴类型，data 设置坐标轴数据。
      type: 'category',//坐标轴类型。'value' 数值轴，'category' 类目轴,'time' 时间轴,'log' 对数轴
    boundaryGap: false,//坐标轴两边留白策略,配置为 true 和 false。默认为 true
//坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。
类目轴中 boundaryGap 可以配置为 true 和 false。默认为 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。
非类目轴，包括时间，数值，对数轴，boundaryGap是一个两个值的数组，分别表示数据最小值和最大值的延伸范围，可以直接设置数值或者相对的百分比，在设置 min 和 max 后无效。 示例：
boundaryGap: ['20%', '20%']
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']// 所有类目名称列表},
  yAxis: {
    type: 'value'//数值轴 },
  series: [
//series：系列列表，每个系列通过 type 设置图表类型，data 设置系列数据。{
      name: 'Email',//系列名称
      type: 'line',
      stack: 'Total',//stack堆叠,stack 的取值是一个字符串，它指定了数据应该堆叠使用的堆叠组名。例如，如果你有两个系列，你可以将它们的 stack 属性都设置为 'stack1'，这样这两个系列的数据就会堆叠在一起。
      data: [120, 132, 101, 134, 90, 230, 210]},{
      name: 'Union Ads',
      type: 'line',
      stack: 'Total',
      data: [220, 182, 191, 234, 290, 330, 310]  },  {
      name: 'Video Ads',
      type: 'line',
      stack: 'Total',
      data: [150, 232, 201, 154, 190, 330, 410]},{
      name: 'Direct',
      type: 'line',
      stack: 'Total',
      data: [320, 332, 301, 334, 390, 330, 320] },{
      name: 'Search Engine',
      type: 'line',
      stack: 'Total',
      data: [820, 932, 901, 934, 1290, 1330, 1320] } ]};
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    </script>
  </body>
</html>

3.南丁格尔玫瑰图
echarts南丁格尔玫瑰图注意事项
南丁格尔玫瑰图是一种在ECharts中表示数据的可视化方法，它可以用于表示一个系列中各项数据的对比情况。使用南丁格尔玫瑰图时，需要注意以下几点：
数据的正负：ECharts中的南丁格尔玫瑰图默认将正值表示为红色，负值表示为蓝色。
数据的大小：数据的绝对值大小会影响到玫瑰图的大小，但并不会影响形状或颜色。
数据的类型：所有数据点应该是数值型，不应该包含非数值型数据。
数据的排序：ECharts会根据数据的大小自动排序，从最大到最小。
配置项：可以通过配置项调整玫瑰图的形状、颜色等。
下面是一个简单的ECharts南丁格尔玫瑰图的示例代码：
//title：图表的标题，可以通过 text 设置标题内容，subtext 设置副标题内容。
//tooltip：提示框，显示当前鼠标所指的数据信息，可以通过 trigger 设置触发类型。
//legend：图例，用于展示不同系列的标记、颜色和名称，可以通过 data 设置图例的数据。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="echarts.js"></script>
  </head>
  <body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));
      // 指定图表的配置项和数据
  option = {
  legend: {
//legend：图例，用于展示不同系列的标记、颜色和名称，可以通过 data 设置图例的数据。
    top: 'bottom'//值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比。 },
  toolbox: {
//toolbox：工具箱，提供图表的导出，数据视图，动态类型切换等功能。辅助工具
    show: true,
//是否显示工具栏组件。
    feature: {// 工具箱，自定义功能
      mark: { show: true },  // '辅助线开关
      dataView: { show: true, readOnly: false }, 数据视图是否不可编辑（只读）
      restore: { show: true },//是否显示该工具。
      saveAsImage: { show: true }//是否显示该工具。  }},
  series: [{
      name: 'Nightingale Chart',//图标名字
      type: 'pie',//饼图图表类型，pie-饼图，line-折线图，bar-柱状图，map-地图
      radius: [50, 250],//50内部圆的半径，250外部圆的半径
      center: ['50%', '50%'],//所在容器是否居中，X轴50%，y轴50%
      roseType: 'area', //类型 item
      itemStyle: {
        borderRadius: 8 //边框圆角
      labelLine:{
           length:6,//和扇形连接的一根线
           length2:8//和文字连接
},
          data: [{
        { value: 40, name: 'rose 1' },
        { value: 38, name: 'rose 2' },
        { value: 32, name: 'rose 3' },
        { value: 30, name: 'rose 4' },
        { value: 28, name: 'rose 5' },
        { value: 26, name: 'rose 6' },
        { value: 22, name: 'rose 7' },
        { value: 18, name: 'rose 8' }
      ]} ]};
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    </script>
  </body>
</html>

echarts 图表使用时会遇到两个情况：
1、当他不能自动的去适用这个屏幕的时候，需要调用mychart.resize方法 resize的作用是重置大小
当页面加载完成的时候自动重置
window.addEventListener('load',function(){
mychart.resize();
})
当重新调整页面大小的时候
window.addEventListener('resize',function(){
mychart.resize();
})

M小慕同学

关注

9
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
准备三个Echarts图表，包括该表常用属性、取值范围、及使用注意事项！

南丁格尔玫瑰图是一种在ECharts中表示数据的可视化方法，它可以用于表示一个系列中各项数据的对比情况。//legend：图例，用于展示不同系列的标记、颜色和名称，可以通过 data 设置图例的数据。数据的正负：ECharts中的南丁格尔玫瑰图默认将正值表示为红色，负值表示为蓝色。数据的大小：数据的绝对值大小会影响到玫瑰图的大小，但并不会影响形状或颜色。数据的排序：ECharts会根据数据的大小自动排序，从最大到最小。正确设置图表的容器大小，确保图表能够在指定的容器内正确显示。当重新调整页面大小的时候。
复制链接

扫一扫