可视化图表自适应，Echarts

最新推荐文章于 2022-11-23 15:16:00 发布

xx820702

最新推荐文章于 2022-11-23 15:16:00 发布

阅读量120

点赞数

分类专栏： html echarts 文章标签： echarts javascript

本文链接：https://blog.csdn.net/xx820702/article/details/125886146

版权

html 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

echarts

3 篇文章 0 订阅

订阅专栏

这段代码展示了如何使用ECharts库创建条形图，并确保图表在窗口大小改变时自动调整。通过监听`window.onresize`事件，调用`mCharts.resize()`方法实现图表的自适应布局。数据包括人物名称和对应的分数，图表上还显示了最大值、最小值和平均值的标记。

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

监听窗口大小

 window.onresize = function(){
    mCharts.resize()
   }

 <script>
    var mCharts = echarts.init(document.querySelector("div"))
    var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强']
    var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86]
    var option = {
      xAxis: {
        type: 'category',
        data: xDataArr
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          type: 'bar',
          data: yDataArr,
          markPoint: {
            data: [
              {
                type: 'max', name: '最大值'
              },
              {
                type: 'min', name: '最小值'
              }
            ]
          },
          markLine: {
            data: [
              {
                type: 'average', name: '平均值'
              }
            ]
          },
          label: {
            show: true,
            rotate: 60
          },
          barWidth: '30%'
        }
      ]
    }
   mCharts.setOption(option)
   window.onresize = function(){
    mCharts.resize()
   }
     </script>