html前端 echarts图表使用详解

原创

有勇气的牛排

发布于 2023-06-25 23:19:21

5190

发布于 2023-06-25 23:19:21

文章被收录于专栏：有勇气的牛排专栏

1 echarts 介绍

官网：https://echarts.apache.org/

菜鸟教程

2 使用

2.1 CDN

https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js

2.2 配置

<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>

<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 350px;height:250px;"></div>

<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    var option = {
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            smooth: true
        }]
    };

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

option详细配置

option = {
   title: {
    text: '标题',
    subtext: '这是标题描述'
  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value',
    // 初始化 单位 (可以不填)
    axisLabel: {
      formatter: '{value} 万元'
    },
    // axisPointer: {
    //   snap: true
    // }
  },
  series: [
    {
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'line',
      smooth: true,
      // 取最大、小值
      markPoint: {
        data: [
          { type: 'max', name: 'Max' },
          { type: 'min', name: 'Min' }
        ]
      },
      // 取平均值
      markLine: {
        data: [{ type: 'average', name: 'Avg' }]
      }
    },
    {
      data: [10, 92, 901, 34, 190, 130, 130],
      type: 'line',
      smooth: true, // 平滑
      // 取最大、小值
      markPoint: {
        data: [
          { type: 'max', name: 'Max' },
          { type: 'min', name: 'Min' }
        ]
      },
      // 取平均值
      markLine: {
        data: [{ type: 'average', name: 'Avg' }]
      }
    }
  ],
  // 比例大小
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  // 比例大小 设置颜色
  color: ['red','blue'],
  // 鼠标聚焦
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross'
    }
  },
  // 保存图片
  toolbox: {
    show: true,
    feature: {
      saveAsImage: {}
    }
  },
};