html前端 echarts图表使用详解

有勇气的牛排 400 前端 2023-05-18 22:30:13

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: {}
    }
  },
};

<h2><a id="1_echarts__0"></a>1 echarts 介绍</h2> 官网：<a href="https://echarts.apache.org/" target="_blank">https://echarts.apache.org/</a> <a href="https://www.runoob.com/echarts/echarts-install.html" target="_blank">菜鸟教程</a> <h2><a id="2__5"></a>2 使用</h2> <h3><a id="21_CDN_6"></a>2.1 CDN</h3> <pre><div class="hljs"><code class="lang-powershell">https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js </code></div></pre> <h3><a id="22__12"></a>2.2 配置</h3> <pre><div class="hljs"><code class="lang-html"><script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script> </code></div></pre> <pre><div class="hljs"><code class="lang-html"> <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> </code></div></pre> option详细配置 <pre><div class="hljs"><code class="lang-javascript">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: {} } }, }; </code></div></pre> <img src="https://static.couragesteak.com/article/2223f76799d4e44592671f6201f8025b.png" alt="image.png" />