基于vue学习echart学习

以下是基于Vue学习Echart的步骤：

1. 首先需要在Vue项目中引入Echart。可以在终端中运行以下命令进行安装：

   npm install echarts --save

2. 在main.js中引入Echart，并将其挂载在Vue的原型上：

   import echarts from "echarts";
   Vue.prototype.$echarts = echarts;

3. 在Vue组件中使用Echart。可以在组件的`mounted`生命周期函数中创建一个Echart实例，并将其挂载到DOM元素上：

   mounted() {
     // 基于准备好的dom，初始化echarts实例
     const myChart = this.$echarts.init(document.getElementById("chart"));

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

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

4. 在模板中添加一个DOM元素，用于挂载Echart实例：

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