echarts在vue中使用方法

最新推荐文章于 2024-05-27 15:23:56 发布

xiaoming_0208

最新推荐文章于 2024-05-27 15:23:56 发布

阅读量124

点赞数

分类专栏：前端文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/xiaoming4965/article/details/128725635

版权

前端专栏收录该内容

33 篇文章 0 订阅

订阅专栏

1、NPM 安装 ECharts

npm install echarts --save

2、全局引入组件 main.js或者单独在文件及中引入

import * as echarts from 'echarts';

3、简单使用

<body>
  <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
  <div id="main" style="width: 600px;height:400px;"></div>
</body>

// 基于准备好的dom，初始化echarts实例
     //初始化
monted(){
this.getEcharts()
}
methods: {
    getEcharts(){
      let myChart = this.$echarts.init(document.getElementById("main"));
        // 绘制图表
        myChart.setOption({
          title: {
          text: 'ECharts 入门示例'
          },
          tooltip: {},
          xAxis: {
               data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
          },
          yAxis: {},
          series: [
            {
              name: '销量',
              type: 'bar',
              data: [5, 20, 36, 10, 10, 20]
            }
          ]
        });
    }
}