一 安装

• 1.安装echarts ：npm install echarts --save
• 2.导入echarts：

import * as echarts from 'echarts';

• 3. 为 ECharts 准备一个具备高宽的 DOM 容器。

• 4. 基于准备好的dom，初始化echarts实例
• 5. 指定图表的配置项和数据
• 6. 使用刚指定的配置项和数据显示图表
• 注意：我们要在mounted生命周期函数中实例化echarts对象。因为我们要确保dom元素已经挂载到页面中

• 其他两种同理：type改自己的类型 柱状图axisLabel对数据的显示 已经设置柱子的渐变色

 mounted() {
    // var myChart = echarts.init(document.getElementById('main'));
    var myChart = echarts.init(this.$refs.main);
    // 绘制图表
    myChart.setOption({
      title: {
        text: "柱状图",
      },
      tooltip: {},
      xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
       axisLabel: {
          /* 显示所有的x轴的数据 */
          interval: 0,
          /* 放不下的倾斜角度 */
          rotate: 0,
          /* 数据距离刻度线的距离 */
          margin: 15,
        },
      },
      yAxis: {},
      series: [
        {
          name: "销量",
          type: "bar",
        //   所有的柱子和手摸上去的提示都变成红色
        // color:‘red’
     
        //   data: [5, 20, 36, 10, 10, 20],
         data:[
            {
                value:5,name:"衬衫",
            },{
                value:20,name:"羊毛衫"
            },
            //给某一个柱子填加颜色
            {
                value:36,name:"雪纺衫",
                itemStyle:{
                //    color: "red"  
                // 设置渐变色的柱子颜色
                color:{
                    type:"linear",
                    x:0,
                    y:0,
                    x2:0,
                    y2:1,
                    colorStops:[
                        {
                            offset:0,
                            color:"red", //柱子最上面的颜色是红色
                        },{
                            offset:1,
                            color:"blue",//柱子最下面的颜色是蓝色
                        },
                    ]
                }
                }
            },{
                value:10,name:"裤子"
            },{
                value:10,name:"高跟鞋"
            },{
                value:20,name:"袜子"
            }
        ]
        },
      ],
    });
    window.BarChart=myChart;
 
  },

折线图axisLabel

 mounted(){
  // var myChart = echarts.init(document.getElementById('main'));
   var myChart = echarts.init(  this.$refs.main);
   // 绘制图表
  myChart.setOption({
  title: {
      text: '折线图'
  },
  tooltip: {},
  xAxis: {
      data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
      axisLabel: {
        /* 显示所有的x轴的数据 */
        interval: 0,
        /* 放不下的倾斜角度 */
        rotate: 0,
        /* 数据距离刻度线的距离 */
        margin: 15,
      },
  },
  yAxis: {},
  series: [
      {
      name: '销量',
      type: 'line',
      data: [5, 20, 36, 10, 10, 20]
      }
  ]
})
window.LineChart=myChart;
 }

  };

饼图的radius低于50% 就会将data中的数据完全显示 并且如果想让饼图显示内容 data值以数组对象方式显示

```
 mounted(){
// var myChart = echarts.init(document.getElementById('main'));
 var myChart = echarts.init(  this.$refs.main);
 // 绘制图表
myChart.setOption({
title: {
    text: '饼图'
},
grid:{
    width:'50%',
    height:'50%',

},
tooltip: {},
xAxis: {
       show:false,
    // data: ['衬衫', '羊毛衫', '羊毛衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {
    show:false
},
series: [
    {
    name: '销量',
    type: 'pie',
     radius: '45%',
    // data: [5, 20, 36, 10, 10, 20]
    data:[
        {
            value:5,name:"衬衫"
        },{
            value:20,name:"羊毛衫"
        },{
            value:36,name:"羊毛衫"
        },{
            value:10,name:"裤子"
        },{
            value:10,name:"高跟鞋"
        },{
            value:20,name:"袜子"
        }
    ]
    }
]

}) window.PieChart=myChart;

}

};```

当窗口尺寸发生变化的时候 让图片也同比例缩放

• 这个是引入的 前面三个图片是作为变量存起来的 这里引入

     mounted(){
       // 页面尺寸一发生变化 图片就重新渲染
       window.onresize=function(){
           window.BarChart.resize()
           window.LineChart.resize()
           window.PieChart.resize()
       }