数据可视化大屏-Vue-1图表基本配置

1.横向柱状图bar

①基本配置

②最大值markPoint、最小值markPoint、平均值markLine

 series: [    //数值轴对应的数据
          {
            type: 'bar',   //代表是柱状图
            markPoint:{   //最大值 最小值
                data:[{type:"max",name:"最大值"},{type:"min",name:"最小值"}]
            }
            markLine:{   //平均值
                data:[type:"average",name:"平均值"]
            }
            data: sellerValues   //sellerValues 存放数据的数组
          }
        ]

③动态刷新、分页 效果

  data () {
    return {
      currentPage: 1, // 当前显示的页数    1
      totalPage: 0, // 一共有多少页        2
      timerId: null // 定时器的标识        3
    }
  },
  destroyed () {
     // 在组件销毁的时候, 需要将监听器取消掉
    clearInterval(this.timerId)
 },
  methods: {
    initChart () {

      // 对图表对象进行鼠标事件的监听
      this.chartInstance.on('mouseover', () => {
        clearInterval(this.timerId)    // 移入关闭定时器
      })
      this.chartInstance.on('mouseout', () => {
        this.startInterval()   // 移出开启定时器
      })
    },
    async getData () {
      // http://127.0.0.1:8888/api/seller
      const { data: ret } = await this.$http.get('seller')
      console.log(ret)
      this.allData = ret
      // 从小到大的排序
      this.allData.sort((a, b) => {
        return a.value - b.value // 从小到大的排序
      })

      // 每5个元素显示一页
      this.totalPage = this.allData.length % 5 === 0 ? this.allData.length / 5: 
 this.allData.length / 5 + 1
      this.updateChart()
      this.startInterval()   // 开启定时器
    },
    updateChart () {
      const start = (this.currentPage - 1) * 5
      const end = this.currentPage * 5
      const showData = this.allData.slice(start, end)

      const sellerNames = showData.map(item => {
        return item.name
      })
      const sellerValues = showData.map(item => {
        return item.value
      })
      const option = {
        xAxis: {
          type: 'value'
        },
        yAxis: {
          type: 'category',
          data: sellerNames
        },
        series: [
          {
            type: 'bar',
            data: sellerValues
          }
        ]
      }
      this.chartInstance.setOption(option)
    },
    // 开启定时器
    startInterval () {
      if (this.timerId) {
        clearInterval(this.timerId)
      }
      this.timerId = setInterval(() => {
        this.currentPage++
        if (this.currentPage > this.totalPage) {
          this.currentPage = 1
        }
        this.updateChart()
      }, 3000)
    }
  }

 ④图表标题title 、网格grid：

 updateChart () {
    const option = {
        title: {  //设置标题
          text: "▎商家销售统计",
          textStyle: {   //标题文字样式
            fontSize: 48,
            color:"red"
          },
          borderWidth:5,   //标题边框宽度
          borderColor:"blue", //标题边框颜色
          borderRadius:5,  //标题边框圆角
          left: 20,    //标题位置
          top: 20     //标题位置
        },
        grid: {  //设置坐标轴位置
          show:true,   //显示网格
          borderWidth:10,
          borderColor:"red",
          width:120,
          height:120,
          top: "20%",
          left: "3%",
          right: "6%",
          bottom: "3%",
          containLabel: true // 距离是包含坐标轴上的文字
        },

    }
}

 ⑤工具栏toolbox：区域缩放dataZoom

  //导出图片，数据视图，动态类型切换，数据区域缩放，重置
   const option = {
        toolbox:{  //工具栏
          feature:{
            saveAsImage:{},  //导出图片
            dataView:{} ,    //数据视图
            magicType:{      //动态类型切换
              type:["bar","line"]
            } , 
            dataZoom:{} ,   //数据区域缩放
            restore:{} ,   //重置
          }
        },
   }

⑥图例legend：

const option = {
   legend:{
        data:["语文","数学"]
   }
   series:[
      { name:"语文",type:"bar",data:dataArr1},
      { name:"数学",type:"bar",data:dataArr2}
    ]  
}

⑦柱状条目配置lable、tooltip:

        series: [
          {
            type: 'bar',
            data: sellerValues,
            barWidth: 66, // 柱状条目宽度
            label: { // 柱状条目数值显示
              show: true,
              rotate:60,  //数值显示旋转效果
              position: 'right',  //数值显示位置
              textStyle: {   //数值文字显示样式
                color: 'white'
              }
            },
            tooltip: { // 柱状条目背景样式
              trigger: 'axis',   //"item" 指鼠标移入时才显示
              //triggerOn:"click"/"mouseover"  鼠标点击才显示
              //formatter:"{b}的{c}" 格式化显示内容
             //formatter:function(arg){ console.log(arg) return arg[0].name }
              axisPointer: {
                type: 'line',
                z: 0,
                lineStyle: {
                  width:66,
                  color: '#2D3443'
                }
              }
            },
            itemStyle: {   // 柱状条目
              barBorderRadius: [0, 33, 33, 0], // 柱状条目圆角
              // 指明颜色渐变的方向  0, 0, 1, 0,  = x1,y1,x2,y2    (x1,y1) 指向(x2,y2)
              // 指明不同百分比之下颜色的值
              color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                // 百分之0状态之下的颜色值
                {
                  offset: 0,
                  color: '#5052EE'
                },
                // 百分之100状态之下的颜色值
                {
                  offset: 1,
                  color: '#AB6EE5'
                }
              ])
            }
          }
        ]

⑧优化  拆分option内容 ：

①初始化的配置initOption
     const initOption = {
        title: {
          text: '▎商家销售统计',
          left: 20,
          top: 20
        },
        grid: {   //网格
          //show : true //网格显示
          //width:300,//网格宽度
          //height:300,//网格高度
          //borderWidth:10, //网格边框宽度
          //borderColor:"red", //网格边框颜色
          top: '20%', //网格位置
          left: '3%',
          right: '6%',
          bottom: '3%',
          containLabel: true // 距离是包含坐标轴上的文字
        },
        xAxis: {
          type: 'value'
          //position:"top"/"bottom"  //x轴的位置
        },
        yAxis: {
          type: 'category'
          //position:"left"/"right"  //y轴的位置
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line',
            z: 0,
            lineStyle: {
              color: '#2D3443'
            }
          }
        },
        series: [
          {
            type: 'bar',
            label: {
              show: true,
              position: 'right',
              textStyle: {
                color: 'white'
              }
            },
            itemStyle: {
              // 指明颜色渐变的方向
              // 指明不同百分比之下颜色的值
              color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                // 百分之0状态之下的颜色值
                {
                  offset: 0,
                  color: '#5052EE'
                },
                // 百分之100状态之下的颜色值
                {
                  offset: 1,
                  color: '#AB6EE5'
                }
              ])
            }
          }
        ]
      }
      this.chartInstance.setOption(initOption)


②获取数据之后的配置dataOption
 const dataOption = {
        yAxis: {
          data: sellerNames
        },
        series: [
          {
            data: sellerValues
          }
        ]
      }
      this.chartInstance.setOption(dataOption)


③分辨率适配的配置adapterOption
      const adapterOption = {
        title: {
          textStyle: {
            fontSize: titleFontSize
          }
        },
        tooltip: {
          axisPointer: {
            lineStyle: {
              width: titleFontSize
            }
          }
        },
        series: [
          {
            barWidth: titleFontSize,
            itemStyle: {
              barBorderRadius: [0, titleFontSize / 2, titleFontSize / 2, 0]
            }
          }
        ]
      }
      this.chartInstance.setOption(adapterOption)

⑨ 分辨率适配resize：

 mounted () {
    window.addEventListener('resize', this.screenAdapter)
    // 首次进入  在页面加载完成的时候, 主动进行屏幕的适配
    this.screenAdapter()
  },
  destroyed () {
    clearInterval(this.timerId)
    // 在组件销毁的时候, 需要将监听器取消掉
    window.removeEventListener('resize', this.screenAdapter)
  },
  methods: {
         // 当浏览器的大小发生变化的时候, 会调用的方法, 来完成屏幕的适配
    screenAdapter () {
      // console.log(this.$refs.seller_ref.offsetWidth)  屏幕大小
      const titleFontSize = (this.$refs.seller_ref.offsetWidth / 100) * 3.6
      // 和分辨率大小相关的配置项
      const adapterOption = {
        title: {
          textStyle: {
            fontSize: titleFontSize
          }
        },
        tooltip: {
          axisPointer: {
            lineStyle: {
              width: titleFontSize
            }
          }
        },
        series: [
          {
            barWidth: titleFontSize,
            itemStyle: {
              barBorderRadius: [0, titleFontSize / 2, titleFontSize / 2, 0]
            }
          }
        ]
      }
      this.chartInstance.setOption(adapterOption)
      // 手动的调用图表对象的resize 才能产生效果
      this.chartInstance.resize()
    }
}

2.折线图line

①基本配置

标注区间markArea、线条平滑样式smooth、线条风格lineStyle、填充风格areaStyle、紧挨Y轴边缘boundaryGap、缩放scale:

const Option = {
        xAxis: {
          data: timeArr,
          boundaryGap:false //折线紧挨Y轴边缘  没有间隔
        },
        yAxis: {
          type: "value",
          scale :true //折线缩放，数值轴不从0开始
        },
        series: [{
          markArea: {  //标注区间
            data: [
              [{ xAxis: "1月" }, { xAxis: "2月" }],   //开始值~结束值
              [{ xAxis: "7月" }, { xAxis: "8月" }]
            ]
          },
          smooth: true,  //折线平滑样式
          lineStyle: {  //折线的风格：颜色、宽度、线的样式
            color: '#5470C6',
            width: 5,
            type: "dashed" //dashed虚线 dotted点线 solid实线
          },
          areaStyle: { //填充风格
            color: "pink"   //填充颜色
          },
        }]
}

②折线堆叠图stack、堆叠风格areaStyle：

 series: [
    {
      name: 'Line 1',
      type: 'line',
      stack: 'Total',  //① 堆叠图  stack值相同
      areaStyle: {     //堆叠风格
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(255, 0, 135)'
          },
          {
            offset: 1,
            color: 'rgb(135, 0, 157)'
          }
        ])
      },
      data: [220, 402, 231, 134, 190, 230, 120]
    },
    {
      name: 'Line 2',
      type: 'line',
      stack: 'Total',  //① 堆叠图 stack值相同
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(255, 191, 0)'
          },
          {
            offset: 1,
            color: 'rgb(224, 62, 76)'
          }
        ])
      },
      data: [220, 302, 181, 234, 210, 290, 150]
    }
  ]

3.散点图scatter

①气泡散点图：散点大小symbolSze、散点颜色itemStyle

option = {
  xAxis: {
    type: 'value',  //注意
    scale: true    //缩放 摆脱0值比例
  },
  yAxis: {
    type: 'value',  //注意
    scale: true    //缩放 摆脱0值比例
  },
  series: [
    {
      type: 'scatter', //气泡散点图
      data: [  //二维数组格式
            [161.2, 51.6], [167.5, 59.0], [159.5, 49.2], [157.0, 63.0], [155.8, 53.6],
            [170.0, 59.0], [159.1, 47.6], [166.0, 69.8], [176.2, 66.8], [160.2, 75.2],
            [172.5, 55.2], [170.9, 54.2], [172.9, 62.5], [153.4, 42.0], [160.0, 50.0],  
          ],
       symbolSize: function (val) {  //散点大小
          console.log(val)   //散点信息
          return val[2] * 2;
      },
      itemStyle: {
         color:  function (val) {  //散点样式
             console.log(val)  // 散点信息
             return "red"
         },
      },
    }
  ]
};

②涟漪散点图effectScatter:  涟漪出现的时机showEffectOn、 涟漪效果影响范围rippleEffect

option = {
  xAxis: {
    scale: true
  },
  yAxis: {
    scale: true
  },
  series: [
    {
      type: 'effectScatter',   //涟漪散点图
      showEffectOn:"emphasis" //涟漪出现的时机  render自动拥有效果  emphasis鼠标移上拥有效果
      rippleEffect:{  //涟漪效果影响范围
          scale:5  //涟漪效果缩放比例
      },
      symbolSize: 20,
      data: [
        [172.7, 105.2],
        [153.4, 42]
      ]
    },
]

③x轴y轴显示位置position:

xAxis: {
   type: 'value',
   position:"top" / "bottom"
},
yAxis: {
   type: 'category',
   position:"right" / "left"
},

④区域缩放dataZoom:

   const option = {
        dataZoom:[
           { type:"silder"  / "inside" ,  //缩放类型：silder滑块
             xAxisIndex : 0     //作用于X轴
           },
           { type:"silder"  / "inside" ,yAxisIndex : 0 , 
             start:0,end:50   //开始区域~结束区域  指明初始状态的缩放情况
           },
        ]
   }

4.饼图pie

①基本设置：数据

 var pieData = [
      {
        name: '淘宝',   //name属性
        value: 11231    //value属性
      },
      {
        name: '京东',
        value: 22673
      },
      {
        name: '唯品会',
        value: 6123
      },
    ]
    var option = {
      series: [
        {
          type: 'pie',
          data: pieData
        }
      ]
    }

②文字显示label

series: [
   label: { // 饼图文字的显示
            show: true, // 显示文字
            formatter: function(arg){  // 决定文字显示的内容
                // console.log(arg)
                return arg.name + '平台' + arg.value + '元\n' + arg.percent + '%'
            }
         },
]

③饼图的半径

series: [ 
    {
      // radius: 20 // 饼图的半径
      // radius: '20%' // 百分比参照的是容器的宽度和高度中较小的那一部分的一半来进行百分比设置
      // radius: ['50%', '75%'] //圆环 ： 第0个元素代表的是內圆的半径 第1个元素外圆的半径
         roseType: 'radius', // 南丁格尔图：饼图的每一个区域的半径是不同的
      // selectedMode: 'single', // 选中的效果,能够将选中的区域偏离圆点一小段距离
         selectedMode: 'multiple', // 选中的效果,能够将选中的多个区域偏离圆点一小段距离
         selectedOffset: 30  // 选中偏移量
   }  
]

5.地图map

①基本配置：允许缩放以及拖动roam、 展示标签label、初始化的缩放比例zoom、地图中心点的坐标center

②显示某个省份的数据：如安徽anhui.json、显示省的 每个市label

    //1. 加载安徽省地图的矢量数据
    //2. 在Ajax的回调函数中注册地图矢量数据 echarts.registerMap('anhui', 矢量地图数据)
    //3. 配置geo的type为'map', map为'anhui' 
    //4. 通过zoom调整缩放比例
    //5. 通过center调整中心点 
    var mCharts = echarts.init(document.querySelector("div"))
    $.get('json/map/anhui.json', function (ret) {
      console.log(ret)
      echarts.registerMap('anhui', ret)
      var option = {
        geo: {
          type: 'map',
          map: 'anhui',
          zoom: 1.2,
          label: {   //显示省的 每个市
            show: true
          },
          center: [116.507676, 31.752889] // 这个坐标值, 我们是可以通过地图矢量数据获取到的
        }
      }
      mCharts.setOption(option)
    })

③不同地区显示不同的颜色：对地图的数据过滤筛选visualMap

    //1. 显示基本的中国地图
    //2. 将空气质量的数据设置给series下的对象
    //3. 将series下的数据和geo关联起来
    //4. 配置visualMap
    var airData = [
        { name: '北京', value: 39.92 },
        { name: '天津', value: 39.13 },
        { name: '上海', value: 31.22 },
        { name: '重庆', value: 66 },
        { name: '河北', value: 147 },
        { name: '河南', value: 113 } ........
    ]
    var mCharts = echarts.init(document.querySelector("div"))
    $.get('json/map/china.json', function (ret) {
      // ret 就是中国的各个省份的矢量地图数据
      console.log(ret)
      echarts.registerMap('chinaMap', ret)
      var option = {
        geo: {
          type: 'map',
          map: 'chinaMap', // chinaMap需要和registerMap中的第一个参数保持一致
          roam: true,      // 设置允许缩放以及拖动的效果
          label: {
            show: true     // 展示标签
          }
        },
        series: [   
          {
            data: airData,   //将空气质量的数据设置给series下的对象
            geoIndex: 0,    // 将空气质量的数据和第0个geo配置关联在一起
            type: 'map'
          }
        ],
        visualMap: {   //对地图的数据过滤筛选
          min: 0,      //最小值
          max: 300,    //最大值
          inRange: {   //颜色渐变
            color: ['white', 'red'] // 控制颜色渐变的范围
          },
          calculable: true   // 出现滑块
        }
      }
      mCharts.setOption(option)
    })

④地图和散点图结合

    //1. 给series下增加一个新的对象
    //2. 准备数据散点数据  , 配置给series下的另外一个对象
    //3. 配置series下的新对象的type值为effectScatter
    //4. 指明散点图的坐标系统为geo
    //5. 调整涟漪动画效果
    var airData = [   //地图的数据
      { name: '北京', value: 39.92 },
      { name: '天津', value: 39.13 },
      { name: '上海', value: 31.22 },
      { name: '重庆', value: 66 }  .............  
    ]
    var scatterData = [  //散点涟漪动画的坐标数据
      {  value: [117.283042, 31.86119]  }
    ]
    var mCharts = echarts.init(document.querySelector("div"))
    $.get('json/map/china.json', function (ret) {
      // ret 就是中国的各个省份的矢量地图数据
      console.log(ret)
      echarts.registerMap('chinaMap', ret)
      var option = {
        geo: {
          type: 'map',
          map: 'chinaMap', // chinaMap需要和registerMap中的第一个参数保持一致
          roam: true, // 设置允许缩放以及拖动的效果
          label: {
            show: true // 展示标签
          }
        },
        series: [
          {
            data: airData,
            geoIndex: 0, // 将空气质量的数据和第0个geo配置关联在一起
            type: 'map'
          },
          {
            data: scatterData,       // 配置散点的坐标数据
            type: 'effectScatter',   // 涟漪动画
            coordinateSystem: 'geo', // 指明散点使用的坐标系统  geo的坐标系统
            rippleEffect: {          // 设置涟漪动画的效果
              scale: 10  // 设置涟漪动画的缩放比例
            }
          }
        ],
        visualMap: {
          min: 0,
          max: 300,
          inRange: {
            color: ['white', 'red'] // 控制颜色渐变的范围
          },
          calculable: true // 出现滑块
        }
      }
      mCharts.setOption(option)
    })

6.雷达图radar

①基本配置

    //1. ECharts最基本的代码结构
    //2. 定义各个维度的最大值, 通过radar属性配置
    //   易用性,功能,拍照,跑分,续航, 每个维度的最大值都是100
    //3. 准备产品数据, 设置给series下的data
    //   华为手机1: 80, 90, 80, 82, 90
    //   中兴手机1: 70, 82, 75, 70, 78
    //4. 将type的值设置为radar
    var mCharts = echarts.init(document.querySelector("div"))
    var dataMax = [   // 各个维度的最大值
      {
        name: '易用性',
        max: 100
      },
      {
        name: '功能',
        max: 100
      },
      {
        name: '拍照',
        max: 100
      },
      {
        name: '跑分',
        max: 100
      },
      {
        name: '续航',
        max: 100
      }
    ]
    var option = {
      radar: { 
        indicator: dataMax, // 配置各个维度的最大值
        shape: 'polygon'    // 配置雷达图最外层的图形 circle圆形 polygon多边形
      },
      series: [
        {
          type: 'radar', // radar 此图表时一个雷达图
          label: {       // 设置标签的样式
            show: true   // 显示数值
          },
          areaStyle: {}, // 将每一个产品的雷达图形成阴影的面积
          data: [
            {
              name: '华为手机1',
              value: [80, 90, 80, 82, 90]
            },
            {
              name: '中兴手机1',
              value: [70, 82, 75, 70, 78]
            }
          ]
        }
      ]
    }
    mCharts.setOption(option)

7.仪表盘gauge

①基本设置

    //1. ECharts最基本的代码结构
    //2. 准备数据, 设置给series下的data
    //3. 将type的值设置为gauge
    var mCharts = echarts.init(document.querySelector("div"))
    var option = {
      series: [
        {
          type: 'gauge',
          min: 50     // min max 控制仪表盘数值范围
          data: [
            {    // 每一个对象就代表一个指针
              value: 97,
              itemStyle: {    // 指针的样式
                color: 'pink' // 指针的颜色
              }
            },              
            {
              value: 85,
              itemStyle: {
                color: 'green'
              }
            }
          ],
        }
      ]
    }
    mCharts.setOption(option)