vue中使用Echarts折线图

基础

main.js

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

组件

<div id="orderStatistics"></div>

// xData为横轴数据，yData为纵轴数据， title 为标题
graphical(xData, yData, title) {
  let myChart = this.$echarts.init(document.getElementById('orderStatistics'));
  myChart.setOption({
    title: {
      text: title,
      textStyle: {
        color: '#989898',
        fontStyle: 'normal',
        fontWeight: 'bold',
        fontSize: 12
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      },      
    },
    legend: {
      data: ['订单总数']
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: xData
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [          
      {
        name: '订单总数',
        type: 'line',
        smooth: true,
        stack: '总量',
        itemStyle: {
          normal: { // 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
            color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0, color: '#81befd' // 0% 处的颜色
              }, {
                offset: 0.4, color: '#e4f2ff' // 100% 处的颜色
              }, {
                offset: 1, color: '#fff' // 100% 处的颜色
              }]
            ), // 背景渐变色
            lineStyle: { // 系列级个性化折线样式
              width: 3,
              type: 'solid',
              color: '#409EFF' // 折线的颜色
            }
          },
          emphasis: {
            color: '#409EFF',
            lineStyle: {        // 系列级个性化折线样式
              width: 2,
              type: 'dotted',
              color: '#409EFF'
            }
          }
        }, // 线条样式
        symbolSize: 2,  // 折线点的大小
        label: {
          normal: {
            show: true,
            position: 'top'
          }
        },
        areaStyle: {normal: {}},
        data: yData            
      }
    ]
  });
},

自定义悬浮显示tooltip

1、将纵轴数据的数组存放对象，而不是单个值
2、自定义formatter

this.orderEchartArrOrder = res.data.statisticsFigure || [] 
let xData = []
let yData = []
let title = ''
this.orderEchartArrOrder.forEach((item, index, arr) => {
  xData.push(item.statisticsDate);
  // yData.push(item.statisticsOrderAmount)
  yData.push({
    value: item.statisticsOrderAmount,
    desc: item.statisticsDate
  })
})
title = '近一周订单统计'
that.graphical(xData, yData, title)

tooltip: {
  trigger: 'axis',
  axisPointer: {
    type: 'cross',
    label: {
      backgroundColor: '#6a7985'
    }
  },
  formatter: function(params) {            
    var itemTitle = params[0];
    var res = itemTitle.data.desc + '<br/>'
              + '订单总数：' + itemTitle.data.value     
    return res;
  }
},

网站导航

网站导航