关于前端: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)
    }
  },