ECharts简单使用

最新推荐文章于 2024-01-29 10:37:01 发布

Just Easy Life

最新推荐文章于 2024-01-29 10:37:01 发布

阅读量187

点赞数

分类专栏： piaoliuxia-front Front_Plugins

本文链接：https://blog.csdn.net/hrbsfdxzhq01/article/details/87870757

版权

piaoliuxia-front 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

Front_Plugins

1 篇文章 0 订阅

订阅专栏

1、

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>ECharts</title>
  <!--1、引入js文件-->
  <script src="./js/echarts.js"></script>
</head>
<body>
<!-- 2、为ECharts准备一个具备大小（宽高）的Dom -->
<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: 'ECharts 入门示例',
      subtext: '副标题'
    },
    /*提示框组件*/
    tooltip: {
      //是否显示提示框组件,默认为true
      show: true,
      //触发类型. axis坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
      trigger: 'axis'
    },
    /*
    * 图例组件。
      图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。
      ECharts 3 中单个 echarts 实例中可以存在多个图例组件，会方便多个图例的布局。

      data:图例的数据数组。数组项通常为一个字符串，每一项代表一个系列的 name
      图例组件会自动根据对应系列的图形标记（symbol）来绘制自己的颜色和标记
      如果 data 没有被指定，会自动从当前系列中获取。多数系列会取自 series.name
      如果要设置单独一项的样式，也可以把该项写成配置项对象。此时必须使用 name 属性对应表示系列的 name。
        data: [{
            name: '系列1',
            // 强制设置图形为圆。
            icon: 'circle',
            // 设置文本为红色
            textStyle: {
                color: 'red'
            }
        }]
    * */
    legend: {
      data:['销量']
    },
    xAxis: {
      data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    yAxis: {},
    series: [{
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
    }]
  };

  // 5、使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
</script>
</body>
</html>

2、

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>ECharts</title>
  <!--1、引入js文件-->
  <script src="./js/echarts.js"></script>
</head>
<body>
<!-- 2、为ECharts准备一个具备大小（宽高）的Dom -->
<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

Just Easy Life

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ECharts简单使用

1、<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>ECharts</title>  <script src="./js/echarts.js"></script&...
复制链接

扫一扫