echart柱状图属性

最新推荐文章于 2024-03-08 11:39:48 发布

qq_41789194

最新推荐文章于 2024-03-08 11:39:48 发布

阅读量468

点赞数

文章标签： echarts vue.js javascript

本文链接：https://blog.csdn.net/qq_41789194/article/details/121327749

版权

该段代码展示了如何使用ECharts库在网页中初始化图表，定义了x轴和y轴的数据，设置图表样式，并实现了窗口大小变化时图表的自适应调整。主要涉及JavaScript、前端开发中的数据可视化和响应式设计技术。

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

drawWeight(dataobj,id) {
      console.log(dataobj);
      let myChart1 = this.$echarts.init(document.getElementById(id))
      // 绘制图表
      let option = {
        xAxis: {  data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], },
        yAxis: {
          type: 'value',//y轴网格
          axisLine: { show: true, },
        },
        //图表位置
        grid: {
          left: '20px',
          right: '20px',
          bottom: '10px',
          top:'15px',
          containLabel: true
        },
        series: [
          {
            type: 'bar',
            //柱状顶部是否展示数据
            label: {
              position: 'top',
              show: true,
              fontSize:10,
            },
            data: [120, 200, 150, 80, 70, 110, 130],
          },
        ],
      }
        // 使用刚指定的配置项和数据显示图表。
        myChart1.setOption(option);
        // myChart1.on('click', that.gotest);
        window.addEventListener('resize', function() {
          if (myChart1) {
            myChart1.resize()
          }
        })
    },