Vue柱状图展示

<template>

   <div ref="syh" id="sj"></div>  <!--创建一个div元素,用于渲染图表-->  

</template>

<script>

// 引入echarts库

import * as yh from "echarts"

export default{

  mounted(){

    // 初始化图表，将其挂载到之前创建的div元素上

    let syh=yh.init(this.$refs.syh)

    // 定义x轴和y轴的数据

    let xData=["张北","尚义","康保","万全","张家口"]

    let yData=[95,98,93,99,100]

    // 定义图表的配置项

    let option={

      title:{

        // 设置图表标题

        text:"柱状图",

        // 标题居左显示

        left:"left"

      },

      xAxis:{

        // 设置x轴的名称和数据

        name:"城市",

        data:xData

      },

      yAxis:{

        // 设置y轴的名称

        name:"占比"

      },

      series:[

        {

          // 设置图表类型为柱状图

          type:"bar",

          // 设置y轴的数据

          data:yData,

        }

      ]

    }

    // 将配置项设置到图表中

    syh.setOption(option)

  }

}

</script>

<!-- 设置div元素的样式 -->

<style>

#sj{

  width: 500px;

  height: 500px;

  border: 1px solid red;

}

</style>