使用 vue-echart

最新推荐文章于 2023-08-08 09:30:42 发布

可乐KL

最新推荐文章于 2023-08-08 09:30:42 发布

阅读量240

点赞数

分类专栏： vue 文章标签： vue.js echarts javascript

本文链接：https://blog.csdn.net/m0_49494051/article/details/126100455

版权

vue 专栏收录该内容

37 篇文章 1 订阅

订阅专栏

安装

yarn add echarts vue-echarts

引入在main.js中

import 'echarts'
import ECharts from 'vue-echarts'
Vue.component('VueEcharts', ECharts)

使用

<VueEcharts :option="option_column" style="height: 400px"></VueEcharts>

option_column: {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        legend: {
          icon: 'roundRect',
          data: ['累计平均日活']
        },
        series: [
          {
            name: '累计平均日活',
            data: [150, 230, 224, 218, 135, 147, 260],
            type: 'line'
          }
        ]
      }