在vue项目中使用echarts

1、通过npm获取echarts

npm install echarts --save

2、在vue项目中引入echarts

这里有两种方式,一种全局注入,

(1)在main.js 中添加下面两行代码

import echarts from 'echarts'

Vue.prototype.$echarts = echarts

(2)新建vue组件,在组件中引入

import * as echarts from 'echarts'

3、然后在组件中使用

<template>

    <div ref="echart"></div>

</template>

<script>

import * asecharts from 'echarts'

exportdefault{

    data() {

    return {

      options : {

        tooltip: {

            trigger: 'axis',

            axisPointer: {

            type: 'shadow'

            }

        },

        grid: {

            left: '3%',

            right: '4%',

            bottom: '3%',

            containLabel: true

        },

        xAxis: {

            type: 'value',

            boundaryGap: [0, 0.01]

        },

        yAxis: {

            type: 'category',

            data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']

        },

        series: [

            {

            name: '2011',

            type: 'bar',

            data: [18203, 23489, 29034, 104970, 131744, 630230]

            },

        ]

        },

    };

  },

 mounted() {

    this.$nextTick(() => {

      this.initChart();

    });

  },

  methods:{

      initChart(){

        this.echart = echarts.init(this.$refs.echart)

        this.echart.setOption(this.options)

      },

  }

}

</script>

今天多付出一份努力,是为了明天能有多一种选择。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容