echarts线图，柱状图，饼图option

vue

<template>
  <div ref="chart" class="chart-container"></div>
</template>

<script>
  import {line, bar, lines} from './options'
  export default {
    data () {
      return {
        charts: null
      }
    },
    mounted() {
      this.charts =  this.$echarts.init(this.$refs.chart)
      this.charts.setOption(lines())
      window.addEventListener('resize', () => {
        this.charts.resize()
      })
    }
  }
</script>

<style lang="scss" scoped>
  .chart-container {
    height: 100%;
  }
</style>

 

options：

import echarts from 'echarts'

// 间距
const grid = {
  top: '10%',
  left: '8%',
  right: '1%',
  bottom: '10%'
}

// 隐藏x轴刻度
const hideXAxis = {
  axisTick: {
    show: false
  },
  axisLine: {
    show: false,
  }
}

// 隐藏y轴刻度
const hideYAxis = {
  axisTick: {
    show: false
  },
  axisLine: {
    show: false
  }
}

// y轴做坐标线为虚线
const yDashed = {
  splitLine: {
    lineStyle: {
      type: 'dashed',
      color: '#B9BAC3'
    },
  }
}

// 渐变色 area
const LinearGradient = (color1, color2) => {
  return {
    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      { offset: 0, color: color1}, 
      { offset: 1, color: color2 }
    ])
  }
}

// 线条阴影
const lineShadow = {
  shadowColor: 'rgba(0, 0, 0, .3)',
  shadowBlur: 5,
  shadowOffsetY: 8
}

// 修改坐标轴de字体颜色
const axisTextColor = (color) => {
  return {
    axisLabel: {
      show: true,
      textStyle: {
        color
      }
    }
  }
}




//  一条线
export const line = () => {
  return {
    tooltip: {
      trigger: 'axis'
    },
    grid,
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      boundaryGap: false,
      ...hideXAxis,
      ...axisTextColor('#B9BAC3')
    },
    yAxis: {
      type: 'value',
      ...hideYAxis,
      ...yDashed,
      ...axisTextColor('#B9BAC3')
    },
    
    visualMap: {
      show: false,
      type: 'continuous',
      min: 0,
      max: 1500,
      color: ['#6354D3', '#D5CFFE']
    },
    series: {
      data: [820, 1, 700, 400, 1290, 100, 800],
      type: 'line',
      smooth: true,
      symbol: 'none',
      areaStyle: {
        ...LinearGradient(
          'rgba(165, 115, 255, 0.3)', 
          'rgba(213, 207, 254, 0.1)'
        ),
      },
      lineStyle: {
        width: 2,
        ...lineShadow
      }
    }
  }
}

// 多条线
export const lines = () => {
  return {
    tooltip: {
      trigger: 'axis'
    },
    grid,
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      boundaryGap: false,
      ...hideXAxis,
      ...axisTextColor('#B9BAC3')
    },
    yAxis: {
      type: 'value',
      ...hideYAxis,
      ...yDashed,
      ...axisTextColor('#B9BAC3')
    },
    series: [
      {
        data: [41, 30, 65, 53, 83, 98, 100],
        type: 'line',
        smooth: true, 
        symbol: 'none', // 小圆点
        lineStyle: {
          width: 2,
          // color: '#F5A1A1',
          ...lineShadow
        },
        itemStyle: {
          ...LinearGradient(
            'rgba(245,161,161, 1)', 
            'rgba(218,85,85, .8)'
          ),
        },
      },
      {
        data: [0, 92, 85, 120, 73, 55, 30],
        type: 'line',
        smooth: true, 
        symbol: 'none', // 小圆点
        lineStyle: {
          width: 2,
          // color: '#96E07A',
          ...lineShadow
        },
        itemStyle: {
          ...LinearGradient(
            'rgba(150,224,122, 1)', 
            'rgba(69,167,32, .8)'
          ),
        },
      },
      {
        data: [24, 67, 79, 86, 65, 82, 90],
        type: 'line',
        smooth: true, 
        symbol: 'none', // 小圆点
        lineStyle: {
          width: 2,
          // color: '#F2AD6B',
          ...lineShadow
        },
        itemStyle: {
          ...LinearGradient(
            'rgba(242,173,107, 1)', 
            'rgba(230,122,19, .8)'
          ),
        },
      },
      {
        data: [55, 67, 69, 72, 53, 39, 120],
        type: 'line',
        smooth: true, 
        symbol: 'none', // 小圆点
        lineStyle: {
          width: 2,
          // color: '#D5D8F3',
          ...lineShadow
        },
        itemStyle: {
          ...LinearGradient(
            'rgba(213,216,243, 1)', 
            'rgba(160,164,190, .8)'
          ),
        },
      }
    ]
  }
}

// 柱状图
export const bar = () => {
  return {
    tooltip: {
      trigger: 'axis',
      axisPointer: {            // 坐标轴指示器，坐标轴触发有效
        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
      }
    },
    grid,
    xAxis: {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
      ...hideXAxis,
      ...axisTextColor('#B9BAC3')
    },
    yAxis: {
      type: 'value',
      ...hideYAxis,
      ...yDashed,
      ...axisTextColor('#B9BAC3')
    },
    series: [
      {
        name: '蒸发量',
        type: 'bar',
        itemStyle: {
          ...LinearGradient(
            'rgba(150, 224, 122, 1)', 
            'rgba(69, 167, 32, .8)'
          ),
        },
        data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
      },
      {
        name: '降水量',
        type: 'bar',
        itemStyle: {
          ...LinearGradient(
            'rgba(245, 161, 161, 1)', 
            'rgba(218, 85, 85, .8)'
          ),
        },
        data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
      }
    ]
  }
}

// 饼图
export const pie = () => {
  return {
    tooltip: {
      trigger: 'item', 
      formatter: function(params, ticket, callback) {
        return '--'
      }
    },
    series: [
      {
        type: 'pie',
        radius: ['45%', '80%'],
        center: ['57%', '50%'],
        itemStyle: { // 此配置
            normal: {
              borderWidth: 2, 
              borderColor: '#fff',
            },
        },
        label: {
          normal: {
            show: false,
            position: 'center'
          }
        },
        data: [
          {
            value: 5, 
            name: '直接访问', 
            itemStyle: {
                color: '#E67A13'
              },
            },
          {
            value: 6, 
            name: '邮件营销',
            itemStyle: {
              color: '#45A720'
            }
          },
          {
            value: 2, 
            name: '邮件营销',
            itemStyle: {
              color: '#DA5555'
            }
          }
        ]
      }
    ]
  }
}