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

原创已于 2022-07-24 01:21:49 修改 · 394 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

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

vue 同时被 2 个专栏收录

10 篇文章

订阅专栏

echarts

1 篇文章

订阅专栏

该博客展示了一个Vue组件的实现，用于在网页中展示一个基于ECharts的折线图。代码包括了ECharts的引入、配置项的设定以及在挂载完成后初始化图表的过程。示例数据包括了姓名和完成数量两个维度，用于绘制折线图。

代码：

<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>