vue 小案例-03 echarts的简单demo 图表

礼小七

已于 2022-07-24 01:21:49 修改

阅读量319

点赞数

分类专栏： vue echarts 文章标签： javascript 前端开发语言

于 2022-07-24 01:16:08 首次发布

本文链接：https://blog.csdn.net/lixiaoqidecsdn/article/details/125955069

版权

vue 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

echarts

1 篇文章 0 订阅

订阅专栏

代码：

<template>
  <div class="echarts-container">
    <div id="main"></div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
export default {
  name: 'echarts-container',
  data () {
    return {
      option: {
        xAxis: {
          type: 'category',
          name: '姓名',
          data: ['王一', '赵二', '张三', '李四', '王五', '赵六', '礼小七']
        },
        yAxis: {
          type: 'value',
          name: '完成数量'
        },
        series: [
          {
            data: [180, 230, 224, 218, 135, 147, 260],
            type: 'line'
          }
        ]
      }
    }
  },
  mounted () {
    // const echartsDom = document.querySelector('#main')
    const myChart = echarts.init(document.querySelector('#main'))
    myChart.setOption(this.option)
  }
}
</script>
<style scoped lang="less">
#main {
  margin: 100px auto;
  width: 380px;
  height: 230px;
  background-color: rgb(33, 194, 119);
}
</style>