vue+echarts渐变,坐标轴配置项

先上效果图:

echarts图表写过不少,每次都忘,简单记录一下

安装echarts

npm install echarts

为了简单使用在main.js注册

import * as echarts from 'echarts'
Vue.prototype.$echart = echarts

然后创建一个chart.js文件,把所有用到的图表,声明函数方法
在charts.js引入echarts
import * as echarts from 'echarts'

首先第一个折线渐变图

export function drawLine(data) {
  const option = {
    title: {
      text: data.title, //图表标题
      top: 5, //距离容器底部位置
      left: 20,
      textStyle: {
        color: '#333',
        fontSize: '18px'
      }
    },
    tooltip: {
      trigger: 'axis'
    },
    // 容器边距
    grid: {
      left: 50,
      top: 50,
      right: 20,
      bottom: 30
    },
    // 默认颜色
    color: '#FF6B70',
    xAxis: [{
      type: 'category',
      data: data.xAxis,
      axisTick: {
        show: false   // 取消x轴刻度
      },
      axisLine: {
        lineStyle: {
          color: '#D8D7D7'  // 设置x轴颜色
        }
      },
      axisLabel: {
        textStyle: {
          color: '#666'  // 设置x轴字体颜色
        }
      }
    }],
    yAxis: [{
      type: 'value',
      axisTick: {
        show: false   // 取消y轴刻度
      }
    }],
    series: {
      type: 'line',
      smooth: true,   // 曲线
      data: data.yAxis,
      lineStyle: {
      // 渐变显示
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
            offset: 0, color: '#FF6B70' // 0% 处的颜色
          }, {
            offset: 1, color: '#FF874C' // 100% 处的颜色
          }],
          global: false
        },
        width: 3,
        cap: 'round'
      },
      showSymbol: false // 隐藏折点
    }
  }
  return option
}

第二个多色渐变柱状图

export function drawColorBar(data) {
  // 声明渐变色
  const colorArr = [
    [{ offset: 1, color: '#409EFF' }, { offset: 0, color: '#41B6E6' }],
    [{ offset: 1, color: '#FF585D' }, { offset: 0, color: '#FA8687' }],
    [{ offset: 1, color: '#05C6B7' }, { offset: 0, color: '#04DCD1' }],
    [{ offset: 1, color: '#3A3A3A' }, { offset: 0, color: '#838582' }],
    [{ offset: 1, color: '#FF7723' }, { offset: 0, color: '#FE904C' }]
  ]
  const yAxis = []
  // 在数据添加itemStyle使柱状图渐变
  data.yAxis.map((item, index) => {
    const itemBar = {
      value: item,
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, colorArr[index])
      }
    }
    yAxis.push(itemBar)
  })
  const option = {
    title: {
      text: data.title,
      left: 'center',
      top: 10,
      textStyle: {
        color: '#333',
        fontSize: '16px',
        fontWeight: 'normal'
      }
    },
    grid: {
      left: 20,
      top: 50,
      right: 20,
      bottom: 30
    },
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      data: data.xAxis,
      axisTick: {
        show: false
      },
      axisLine: {
        show: false
      },
      axisLabel: {
        textStyle: {
          color: '#333'
        }
      }
    },
    yAxis: {
      type: 'value',
      show: false
    },
    series: [{
      data: yAxis,
      type: 'bar',
      // 柱状图显示顶部数字
      label: {
        show: true,
        position: 'top',
        formatter: '{@score} 次'
      },
      // 柱宽
      barWidth: 30
    }]
  }
  return option
}

第三个空心圆留白圆形图

export function drawPie(data) {
  const option = {
    title: {
      text: data.title,
      left: 'center',
      top: 10,
      textStyle: {
        color: '#333',
        fontSize: '16px',
        fontWeight: 'normal'
      }
    },
    color: ['#04DCD1', '#EED813', '#0261D4'],
    grid: {
      left: 20,
      top: 50,
      right: 20,
      bottom: 30
    },
    tooltip: {
      trigger: 'item'
    },
    // 数据标记
    legend: {
      orient: 'vertical',  // 垂直显示
      left: 5,
      bottom: 10,
      itemWidth: 10,
      itemHeight: 10,
      icon: 'circle'  // 显示方式为圆
    },
    series: [{
      type: 'pie',
      seriesLayoutBy: 'row',
      radius: ['60%', '75%'],
      // 外显线的长度
      labelLine: {
        length: 20,
        length2: 20
      },
      // 留白,将borderColor的颜色和背景色一致
      itemStyle: {
        borderWidth: 10,
        borderColor: '#fafafa'
      },
      data: data.data
    }]
  }
  return option
}

在页面中导入方法

import { drawLine, drawColorBar, drawPie } from '../../utils/charts'

在data中声明chart1

drawLine() {
      this.chart1 = this.$echart.init(document.getElementById('chart1'))
      this.chart1.setOption(drawLine(this.chart1Data))
},

添加resize事件,浏览器缩放将echarts重新渲染

window.addEventListener('resize', () => {
     this.chart1.resize()
})

侧边栏菜单收缩时,resize事件无法重新渲染,需要添加定时器

监听侧边栏状态,延时执行

watch: {
    sidebar() {
      setTimeout(() => {
        this.chart1.resize()
      }, 300)
    }
  },