echarts视频观后笔记

最新推荐文章于 2022-12-09 15:48:36 发布

我要走走看看

最新推荐文章于 2022-12-09 15:48:36 发布

阅读量237

点赞数 2

本文链接：https://blog.csdn.net/m0_51221102/article/details/114883666

版权

本文是关于ECharts的学习笔记，涵盖了柱状图、折线图、散点图、饼图、地图、雷达图、仪表盘等多种图表的配置与使用。讲解了ECharts的基本操作，如通用配置、自适应、加载动画、交互API等。此外，还涉及到了Koa2的简单介绍及项目中的应用，包括后端中间件和前端Vue.js的集成。

摘要由CSDN通过智能技术生成

ECHARTS

该笔记为本人在观看B站pink老师关于echarts的视频后所做，需要有一定的html、css、JavaScript、vue.js基础。

一、常用图表

1. 柱状图

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

  <!-- 1.引入 -->
  <script src="./lib/echarts.common.js"></script>
  
<body>
  <!-- 2.存放图表的盒子 -->
  <div style="width: 600px;height: 400px;"></div>
  <script>
    // 3.创建实例对象，使用echarts的方法init()
    var mCharts = echarts.init(document.querySelector('div'))
    // x轴数据
    var xDataArr = ['one', 'two', 'three', 'four', 'five']
    // y轴数据
    var yDataArr = [88, 92, 64, 32, 45]
    // 4.配置项
    var option = {
    
      xAxis: {
      // x轴
        type: 'category',  // 类型是类别
        data: xDataArr // 数据
      },
      yAxis: {
      // y轴
        type: 'value'  // 数值
      },
      series: [{
    
        name: '语文',
        type: 'bar',  // 柱状图
        data: yDataArr,  // y轴数据
        markPoint: {
      // 设置最值
          data: [
            {
    
              type: 'max', name: '最大值'
            }, {
    
              type: 'min', name: '最小值'
            }
          ]
        },
        markLine: {
      // 设置平均值
          data: [
            {
    
              type: 'average', name: '平均值'
            }
          ]
        },
        label: {
      // 设置具体数值
          show: true,
          rotate: 60,
          position: 'inside'
        },
        barWidth: "50%"
      }]

    }
    // 5.将配置项设置给echarts实例，使用echarts方法setOption()
    mCharts.setOption(option)
  </script>
</body>

series是一个数组，可以存放多个对象，每个对象是一组统计数据

      series: [{
        name: '语文',
        type: 'bar',
        data: yDataArr1,
      {
        name: '数学',
        type: 'bar',
        data: yDataArr2
      }

将引入的echarts.js放在lib文件夹下。
将竖柱状图改成横柱状图只需将x轴与y轴互换：

category：类别。表示该轴显示的是不同类。
value：数据。表示该轴显示的是数值。

      // 更改x轴和y轴的角色使之变为横向
      xAxis: {
        type: 'value'
      },
      yAxis: {
        type: 'category',
        data: xDataArr
      },

2. 通用配置

标题: title

文字样式：textStyle
标题边框：borderwidth、borderColor、borderRadius
标题位置：left、top、right、bottom

      title: {
        text: '成绩展示',
        textStyle: {
          color: '#5470C6'
        },
        borderWidth: 1,
        borderColor: '#ccc',
        borderRadius: 5,
        left: "50%"
      }

提示: tooltip：提示框组件，用于配置鼠标滑过或点击图表时的显示框

触发类型：trigger、item、axis
触发时机：triggerOn、mouseover、click
格式化：formatter：字符串模板、回调函数

   	  tooltip: {
        trigger: 'axis',
        triggerOn: "click",
        // formatter: '{b} 的成绩是 {c}'
        formatter: function (arg) {
          // console.log(arg);
          return arg[0].name + '的分数是：' + arg[0].data
        }
      }

工具按钮: toolbox：ECharts提供的工具栏

内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具
显示工具栏按钮feature 内属性：
saveAslmage、dataView、 restore、 dataZoom、 magicType

      toolbox: {
        feature: {
          saveAsImage: {}, // 导出图片
          dataView: {}, // 数据视图
          restore: {}, // 重置
          dataZoom: {}, // 区域缩放
          magicType: {
            type: ['bar', 'line']
          } // 动态图表类型的切换
        }
      }

图例：legend：用于筛选系列,需要和series配合使用（需要series中有多组统计数据时）

legend中的data是一个数组
legend中的data的值需要和series数组中某组数据的name值一致

      legend: {
        data: ['语文', '数学']
      }

3. 折线图

标记:最大值，最小值，平均值，标注区间：markPoint、markLine、 markArea
线条控制：平滑，风格：smooth、linestyle
填充风格：areaStyle

      series: [
        {
          name: 'Sales',
          type: 'line',
          data: yDateArr,
          markPoint: {
            data: [
              {
                type: 'max'
              },
              {
                type: 'min'
              }
            ]
          },
          markLine: {
            data: [
              {
                type: 'average'
              }
            ]
          },
          markArea: {  // 标注区间
            data: [
              [
                {
                  xAxis: 'July'
                },
                {
                  xAxis: 'August'
                }
              ],
              [
                {
                  xAxis: 'October'
                },
                {
                  xAxis: 'November'
                }
              ]
            ]
          },
          smooth: true,  // 平滑
          lineStyle: {  // 线条风格
            color: 'green',
            type: 'dashed'  // solid/dotted/dashed
          },
          areaStyle: {  // 填充风格
            color: 'pink'

最低0.47元/天解锁文章

我要走走看看

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
echarts视频观后笔记

ECHARTS一、常用图表1. 柱状图5分钟上手ECharts步骤1:引入echarts.js文件步骤2:准备一个呈现图表的盒子步骤3:初始化echarts实例对象步骤4:准备配置项步骤5:将配置项设置给echarts实例对象  <script src="./lib/echarts.common.js"></script> <body>  &lt
复制链接

扫一扫

专栏目录