Vue项目中安装并使用Echarts-阿里云开发者社区

Vue项目中安装并使用Echarts

2024-06-06 18

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： Vue项目中安装并使用Echarts

1. 安装Echarts

使用npm

npm install echarts --save

导入Echarts插件

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

import echarts from 'echarts'

我们来做个简单的实例

首先需要一个容器装下Echarts

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

mounted () {
  // 初始化echarts
    var myChart = echarts.init(document.querySelector('#list'))
    // 拿到echarts图表需要的数据
    var option = option: {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'bar',
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.2)'
          }
        }]
      }
      // 使用方法引入echarts
    myChart.setOption(option)
  }

<template>
  <div id="list" style="width: 600px;height:400px;"></div>
</template>
 
<script>
import echarts from 'echarts'
export default {
  name: 'dome',
  props: {
  },
  data () {
    return {
      option: {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'bar',
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.2)'
          }
        }]
      }
    }
  },
  methods: {},
  mounted () {
    var myChart = echarts.init(document.querySelector('#list'))
    var option = this.option
    myChart.setOption(option)
  }
}
</script>
 
<style scoped>
 
</style>

Vue项目中安装并使用Echarts

1. 安装Echarts

首先需要一个容器装下Echarts

热门文章

最新文章

相关课程

相关电子书