关于前端:vueecharts渐变坐标轴配置项

先上效果图:

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)
    }
  },