vue脚手架中使用echarts视图

vue脚手架中使用echarts

官网使用文档：https://echarts.apache.org/handbook/zh/get-started/

一，安装echarts （可视图）

npm install echarts --save

二，在main.js 中引入

import * as echarts from 'echarts';
Vue.prototype.$echarts=echarts

三，案例

<template>
  <div >
  <div style="with:800px;height:500px" ref="bar">

  </div>
  </div>
</template>

<script>
export default {
    data(){
        return {

        }
    },
    methods:{

        echartsInit(){
            debugger;
            var myChart = this.$echarts.init(this.$refs.bar);
            var option = {
                title: {
                    text: 'ECharts 入门示例'
                },
                tooltip: {},
                legend: {
                    data:['销量']
                },
                xAxis: {
                    data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                },
                yAxis: {},
                series: [{
                    name: '销量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20]
                }]
            };
            myChart.setOption(option);

        }

    },
    mounted(){
        this.echartsInit();
    }
}
</script>

<style>

</style>

四，效果