echarts案例

最新推荐文章于 2024-06-26 11:09:42 发布

不忘初心ing

最新推荐文章于 2024-06-26 11:09:42 发布

阅读量187

点赞数 1

分类专栏： echarts 文章标签： js javascript css

本文链接：https://blog.csdn.net/baogeprh/article/details/116046323

版权

echarts 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文展示了如何使用ECharts库创建一个折线图，并在图中显示最大值、最小值和平均值。通过示例代码详细解释了配置项和数据的设置，包括X轴、Y轴、提示栏、图例、网格和工具箱等元素的定制。此外，还实现了点击图表时显示对应数值的功能。

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

最近在写图表，研究了一下echarts，写个小案例里面有各种配置的备注，折线图显示最大、最小值、平均值的功能。话不多说上代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>echarts练习</title>
  <script src="./4.0.3/echarts.common.js"></script>
  <script src="./jquery-2.2.3.min.js"></script>
</head>
<body>
  <div class="publicity"></div>
  <div class="money">15</div>
  <div id="main" style="width:300px;height:250px;"></div>
</body>
<style>
  .money {
    height: 30px;
    width:100px;
    margin-left: 50px;
    margin-bottom: 20px;
    text-align: center;
  }
</style>
<script type="text/javascript">
  var publicity = ['科大讯飞', '企业价值观', '扭转乾坤', '牛年大吉', '聆听胡']
  var pubIndex = Math.floor(Math.random() * publicity.length)
  $('.publicity').text(publicity[pubIndex])
  var money = document.querySelector('.money')
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById('main'));
  // 指定图表的配置项和数据
  var option = {
    title: {
      textStyle: {
        fontSize: 10,
        lineHeight: 20
      },
      backgroundColor: '#ccc',
      borderColor: 'rgb(255,0,255)',
      borderRadius: 5,
      text: 'ECharts 入门示例'
    },
    tooltip: { // 提示栏配置
      trigger: 'axis',
      backgroundColor: '#abcdef'
    },
    legend: {  // 标题配置
      data: ['销量'],
    },
    grid:{
      show:true,
      backgroundColor:'rgba(128, 128, 128, 0.5)'
    },
    toolbox: {  // 转换的工具
      show: true,
      feature: {
        magicType: { type: ['line', 'bar'] },
      }
    },
    xAxis: {  // X轴上面的配置
      type: 'category',
      boundaryGap: false,
      data: ["1月", "2月", "3月", "4月", "5月", "6月", '7月', '8月', '9月', '10月', '11月', '12月'],
      // 显示全部的X轴数据
      axisLabel: { interval: 0 },
      axisLine: {
        symbol: ['none', 'arrow'],
      },
    },
    yAxis: {  // Y轴上面的配置
      type: 'value',
      splitLine: {
        show: true,
        lineStyle: {
          color: ['blue'],
          width: 1,
          type: 'solid'
        }
      }
    },
    series: [{
      name: '销量',
      type: 'line',
      smooth: true,
      data: [5, 20, 36, 10, 10, 20, 30, 29, 37, 19, 11, 29],
      markPoint: {  // 图表上显示的值
        data: [
          { type: 'max', name: '最大值' },
          { type: 'min', name: '最小值' }
        ]
      },
      markLine: {
        data: [
          { type: 'average', name: '平均值' }
        ]
      },
    }],
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
  myChart.on('click', function (params) {
    console.log(params.data, money)
    money.innerHTML = params.data
  });
</script>
</html>

效果图
在这里插入图片描述

不忘初心ing

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
echarts案例

最近在写图表，研究了一下echarts，写个小案例里面有各种配置的备注，折线图显示最大、最小值、平均值的功能。话不多说上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=
复制链接

扫一扫

专栏目录