ECharts简单使用

系统管理员 2022-03-17 02:16 209阅读 0赞

1、

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hyYnNmZHh6aHEwMQ_size_16_color_FFFFFF_t_70][]

2、

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hyYnNmZHh6aHEwMQ_size_16_color_FFFFFF_t_70 1][]

<!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8" />
      <title>ECharts</title>
      
      <script src="./js/echarts.js"></script>
    </head>
    <body>
    
    <div id="main" style="width: 600px; height: 400px"></div>
    
    <script type="text/javascript">
      // 3、基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));
    
      // 4、指定图表的配置项和数据
      var option = {
        title: {
          text: '未来一周气温变化',
          subtext: '纯属虚构'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data:['最高气温','最低气温']
        },
        /*
        * 工具栏。内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。
        * magicType:动态类型切换
        *           show:是否展示该工具
        *           type:启用的动态类型，包括'line'（切换为折线图）, 'bar'（切换为柱状图）, 'stack'（切换为堆叠模式）, 
    'tiled'（切换为平铺模式）。
        * */
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            dataView: {readOnly: false},
            magicType: {type: ['line', 'bar']},
            restore: {},
            saveAsImage: {}
          }
        },
        /*
        * xAxis：直角坐标系 grid 中的 x 轴
        *   type: 坐标轴类型 默认category
        *     'value' 数值轴，适用于连续数据。
              'category' 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。
            boundaryGap：坐标轴两边留白策略。类目轴中 boundaryGap 可以配置为 true 和 false。默认为 true，这时候刻度只是
    作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。
            data：类目数据，在类目轴（type: 'category'）中有效。
                  如果没有设置 type，但是设置了 axis.data，则认为 type 是 'category'。
                  如果设置了 type 是 'category'，但没有设置 axis.data，则 axis.data 的内容会自动从 series.data 
    中获取，这会比较方便。不过注意，axis.data 指明的是 'category' 轴的取值范围。如果不指定而是从series.data 中获取，那么只
    能获取到 series.data 中出现的值。比如说，假如 series.data 为空时，就什么也获取不到。
            name：坐标轴名称
          yAxis：直角坐标系 grid 中的 y 轴
            axisLabel：坐标轴刻度标签的相关设置。
                formatter：刻度标签的内容格式器，使用字符串模板，模板变量为刻度默认标签 {value}
        * */
        xAxis:  {
          type: 'category',
          boundaryGap: false,
          data: ['周一','周二','周三','周四','周五','周六','周日'],
          name: '时间'
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value} °C'
          }
        },
        /*
        * series：系列列表。每个系列通过 type 决定自己的图表类型
        *   line：折线图
        *   name：系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
        *   data：系列中的数据内容数组。数组项通常为具体的数据项。
        *   markPoint：图表标注。
        *     data：标注的数据数组。每个数组项是一个对象，有下面几种方式指定标注的位置。
        *       name：标注名称。
        *       type：特殊的标注类型，用于标注最大值最小值平均值等。
        *   markLine：图表标线。
        * */
        series: [
          {
            name:'最高气温',
            type:'line',
            data:[11, 11, 15, 13, 12, 13, 10],
            markPoint: {
              data: [
                {type: 'max', name: '最大值'},
                {type: 'min', name: '最小值'}
              ]
            },
            markLine: {
              data: [
                {type: 'average', name: '平均值'}
              ]
            }
          },
          {
            name:'最低气温',
            type:'line',
            data:[1, -2, 2, 5, 3, 2, 0],
            markPoint: {
              data: [
                {name: '周最低', value: -2, xAxis: 1, yAxis: -1.5}
              ]
            },
            markLine: {
              data: [
                {type: 'average', name: '平均值'},
                [{
                  symbol: 'none',
                  x: '90%',
                  yAxis: 'max'
                }, {
                  symbol: 'circle',
                  label: {
                    normal: {
                      position: 'start',
                      formatter: '最大值'
                    }
                  },
                  type: 'max',
                  name: '最高点'
                }]
              ]
            }
          }
        ]
      };
    
      // 5、使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    </script>
    </body>
    </html>

[http://www.suchso.com/projecteactual/vue-echarts.html][http_www.suchso.com_projecteactual_vue-echarts.html]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hyYnNmZHh6aHEwMQ_size_16_color_FFFFFF_t_70]: /images/20220317/d218d4c2e653452d8973b78609217915.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hyYnNmZHh6aHEwMQ_size_16_color_FFFFFF_t_70 1]: /images/20220317/e43b2297edf748f190cec2511abc59e2.png
[http_www.suchso.com_projecteactual_vue-echarts.html]: http://www.suchso.com/projecteactual/vue-echarts.html