vue的echarts配置

信588

已于 2023-01-31 09:43:38 修改

阅读量102

点赞数

文章标签： echarts vue.js javascript

于 2023-01-31 09:40:33 首次发布

本文链接：https://blog.csdn.net/qq_56023114/article/details/128588458

版权

        <div class="echart" id="mychart" :style="myChartStyle"></div>
        import * as echarts from "echarts";

  		data() {
    return {
      xData: ["实际在岗 ", "当前应在岗 ", "实际出勤 ", "应出勤 "], //横坐标
      yData: [23, 24, 18, 250], //数据
      myChartStyle: { float: "left", width: "100%", height: "400px" },//图表样式
    }
  },
    mounted() {
    this.initEcharts();
  },
  methods:{
  	  initEcharts() {
      // 基本柱状图
      const option = {
        xAxis: {
          type: "value",
        },
        yAxis: {
          type: "category",
          data: this.xData,
          name: "人"


        },
        tooltip: {
    	 trigger: 'axis',
         axisPointer: {
         type: 'shadow'
         }
        },
        series: [
          {
            type: "bar", //形状为柱状图
            data: this.yData
          }
        ]
      };
      const myChart = echarts.init(document.getElementById("mychart"));
      myChart.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  }
  //name设置单位
  //type设置横向柱状图
  //data设置数据
  //tooltip设置鼠标悬停展示