vue简单引入ECharts

Vue.js 是一个流行的前端JavaScript框架，它可以通过组件化的方式来构建用户界面。ECharts 是百度开源的一个强大的数据可视化库。要在Vue项目中简单引入ECharts，你可以按照以下步骤进行：

1. 安装ECharts：
你可以通过npm或yarn来安装ECharts到你的Vue项目中。
使用npm：

   npm install echarts --save

使用yarn：

   yarn add echarts

2. 在Vue组件中引入并注册ECharts：
在你的Vue组件中，首先引入ECharts库，然后在`mounted`生命周期钩子中初始化ECharts实例，并将实例绑定到一个DOM元素上。

示例代码如下：

   <template>
     <div ref="chart" style="width: 600px;height:400px;"></div>
   </template>

   <script>
   import * as echarts from 'echarts';

   export default {
     name: 'EChartsDemo',
     mounted() {
       // 基于准备好的dom，初始化echarts实例
       const myChart = echarts.init(this.$refs.chart);

       // 指定图表的配置项和数据
       const option = {
         title: {
           text: 'ECharts 示例'
         },
         tooltip: {},
         legend: {
           data:['销量']
         },
         xAxis: {
           data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
         },
         yAxis: {},
         series: [{
           name: '销量',
           type: 'bar',
           data: [5, 20, 36, 10, 10, 20]
         }]
       };

       // 使用刚指定的配置项和数据显示图表。
       myChart.setOption(option);
     }
   }
   </script>

3. 使用ECharts：
在上述代码中，我们通过`ref`属性在模板中定义了一个元素，并在`mounted`钩子中通过`echarts.init`初始化了ECharts实例，并将该实例绑定到了这个DOM元素上。然后通过`setOption`方法配置了图表的样式和数据。