vue2项目中使用Echarts

vue2项目中使用Echarts

一 柱状图

（1）要展现的数据：

（2）使用echarts柱状图来展现
首先创建一个div,指定宽高，该div就是柱状图展现的位置

（宽度在 el-card中已经指定过了，因此不需要在div中指定宽）
其次：初始化echarts实例

 var myChart2 = echarts.init(this.$refs.echarts2);
 // this.refs.echarts2 指向ref为echarts2的dom元素

配置数据：

let news= userData.map(item=>{return item.new})
//map循环遍历userData数组，拿到每一项中的new值。news=[5,10,12,69,34,51,50]
let actives=userData.map(item=>{return item.active})
myChart2.setOption({
		//xAxis:x轴
        xAxis: {
          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周天"],
        },
        //不用配置y轴，会根据要渲染的数据自动生成
        yAxis: {},
        //要渲染的数据
        series: [
          {
            type: "bar",
            data: news,
          },
          {
            type: "bar",
            data: actives,
          },
        ],
      });

总结：
this.$refs.echarts2： 获取 ref为 echarts2的dom元素
map() 可以循环遍历数组，返回一个新数组。

二 折线图

折线图数据:

初始化 并配置数据

     //折线图
      //拿到每一个data数据中的每一个key，返回一个数组
      let keys = Object.keys(lineData.data[0]);
      let series = [];
      //遍历关键字数组，在data数组中找到每一个对象里面对应key 的value,放入series中
      keys.forEach((key) => {
        series.push({
          name: key,
          //循环处理数组 map() 会返回一个新数组
          data: lineData.data.map((item) => item[key]),
          type: "line",
        });
      });
      var myChart1 = echarts.init(this.$refs.echarts1);
      myChart1.setOption({
        title: {
          text: "ECharts折线图",
        },
        tooltip: {},
        xAxis: {
          type: "category",
          data: lineData.date,
        },
        yAxis: {
          type: "value",
        },
        series: series,
        //图例
        legend: {
          data: keys,
        },
      });

总结：Object.keys(对象) 返回对象的所有key 构成的数组
forEach() 遍历数组

三 饼状图

  //饼图数据
                videoData:[
                    {
                        name:'小米',
                        value:2999
                    },
                    {
                        name:'苹果',
                        value:5999
                    },
                    {
                        name:'vivo',
                        value:1999
                    },
                    {
                        name:'oppo',
                        value:2999
                    },
                    {
                        name:'魅族',
                        value:2999
                    },
                ],

  //饼状图
      //初始化echarts 实例
      var myChart3 = echarts.init(this.$refs.echarts3);
      myChart3.setOption({
        series: [
          {
            type: "pie",
            data: videoData,
          },
        ],
        //tooltip  配置悬浮提示框
        tooltip: {
          trigger: "item",
        },
      });