vue2引入echarts案例

最新推荐文章于 2024-03-05 15:55:19 发布

李白的故乡

最新推荐文章于 2024-03-05 15:55:19 发布

阅读量227

点赞数

分类专栏：项目技术文章标签： echarts javascript 前端

本文链接：https://blog.csdn.net/qq_45448242/article/details/128508977

版权

项目技术专栏收录该内容

21 篇文章 0 订阅

订阅专栏

#vue2引入echarts案例

<template>
  <div>
    <div id="main" style="width: 600px; height: 400px"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  // name: 'MyechartsText1',

  mounted() {
    var myChart = echarts.init(document.getElementById('main'))
    myChart.setOption({
      xAxis: {
        data: ['1', '2', '3', '4', '5', '6', '7'],
      },
      yAxis: {},
      series: [
        {
          type: 'bar',
          data: [23, 24, 18, 25, 27, 28, 25],
        },
        {
          type: 'bar',
          data: [26, 24, 18, 22, 23, 20, 27],
        },
      ],
    })
  },
}
</script>

<style lang="scss" scoped></style>