echarts配置集锦

基本配置

参考线markLine

• markLine
• import ‘echarts/lib/component/markLine’

  series: [
    {
      name: '趋势',
      type: 'line',
      data: [],
      smooth: true,
      markLine: {
        data: [
          {type: 'average', name: '平均值'}
        ]
      }
    },
    {
      name: '模拟',
      type: 'line',
      data: [],
      smooth: true,
      markLine: {
        /* 以下设置一行后，平均线就没有开始和结束标记了（即看不见箭头了） */
        symbol: 'none',
        data: [{
          name: '平均线',
          // 支持 'average', 'min', 'max'
          type: 'average',
          lineStyle: {
            normal: {
              color: 'green',
              width: 2,
              type: 'solid'
            }
          }
        }]
      }
    }
  ]

Y轴分割线隐藏

• splitLine
• splitLine.show=false

  yAxis: {
    type: 'value',
    splitLine: {
      show: false
    }
  }

区域缩放

• dataZoom

dataZoom: [
    {
      type: 'slider',
      show: true,
      xAxisIndex: [0],
      start: 20,
      end: 100
    }
],

折线变曲线

• smooth，如上smooth: true

虚线

• lineStyle
• series-line.lineStyle.type = ‘dashed’

折线图和柱状图切换

• magicType

import 'echarts/lib/component/toolbox'

toolbox: {
    feature: {
      magicType: {
        type: ['line', 'bar']
      }
    }
},

饼图的label自定义富文本样式

• (\n实现换行；rich针对不同文本定义不同的样式)

label: {
      formatter: [
          '{d|{d}%}',
          '{b|{b}}'
      ].join('\n'),
      rich: {
          d: {
              color: '#fff',
              lineHeight: 20,
              fontSize: '14px'
          },
          b: {
              color: 'rgba(255, 255, 255, 0.5)',
              lineHeight: 14,
              fontSize: '10px'
          }
      }
},

柱状图柱子渐变色

series: [{
    type: 'bar',
    barWidth: '50%', // 柱子宽度
    itemStyle: {
        color: new echarts.graphic.LinearGradient(
            0, 0, 0, 1,
            [
                {offset: 0, color: '#0075FF'},
                {offset: 1, color: '#0075FF00'}
            ]
        )
    },
}]

Y轴分割线样式

• 隐藏Y轴轴线和刻度

yAxis: {
    type: 'value',   
    axisLine: {
        show: false //y轴坐标轴轴线显示与否
    },
    axisTick: { //坐标轴刻度显示与否
        show: false
    },                   
    axisLabel: {
        color: '#A6ACBE' // Y轴文字颜色
    },
    splitLine: { // 分割线样式
            show: false,
            lineStyle:{
                type: 'dashed',
                width: 1,
                color: '#ffffff10'
        }
    },
},

区域面积图

• 区域渐变

// 在series中添加areaStyle
areaStyle: {
    opacity: 0.8,
    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
        offset: 0,
        color: 'rgba(168, 224, 255, 1)' // 上
    }, {
        offset: 1,
        color: 'rgba(177, 227, 255, 0)' // 下
    }])
},

折线图折线渐变

// 在series中添加lineStyle
lineStyle: {        // 系列级个性化折线样式
    width: 3,
    type: 'solid',
    // color: '#1DADF1' // 单色
    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
    offset: 0,
    color: '#BD00FF'
    }, {
    offset: 1,
    color: '#6100FF'
}]),

坐标轴指示器渐变色

tooltip: {
    trigger: 'axis',
    axisPointer: {
        type: 'shadow',
        shadowStyle: {
          color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                  offset: 0, color: 'rgba(196, 196, 196, 0)' // 0% 处的颜色
              }, {
                  offset: 1, color: shadowcolor // 100% 处的颜色
              }],
              global: false // 缺省为 false
          }
        }
    }
},

柱条的最大最小宽度

柱条重叠

• 当有两个数据组时，让两个柱子不错位展示，可以设置 barGap 为 ‘-100%’

series: {
    barGap: '-100%',
    barWidth: '30%',
    barMaxWidth: 40, // 也可设置百分比
    barMinWidth: 20,
}

柱条颜色定制

• 某根柱子设置单独的颜色

data: [300, {
  value: 100,
  itemStyle: {
      color: '#FFAA5B'
  }
},
200
]

图例间隔

legend: {
    itemGap: 30,
},

折线上的标记（小圆圈）

showSymbol: true, // 标记显示与否
symbol: 'emptyCircle', // 类型
symbolSize: 6, // 大小

柱子圆角

itemStyle: {
    //柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
    normal: {
        color: '#3DCBA3',
        //柱形图圆角，初始化效果
        barBorderRadius:[15, 15, 0, 0]
    }
}

多个y轴

yAxis: [{
        type: 'value',
    }, {
        type: 'value',  
        name: '温度',
        position: 'right', // 右侧y轴
        nameTextStyle: { // 轴名称颜色
          color: '#BEC2CC'
        }
    }],
// 在series里面通过yAxisIndex来决定该条数据使用哪个y轴
series: [{
    name: '平均室内温度℃',
    yAxisIndex: 1,
    data: [],
    type: 'line',
}],

图例的icon设置

legend: {
    show: true,
    // icon:"circle",   直接统一设置为circle
    data:[{
        name: '11',
        icon: 'circle', // 单独为某一个图例项设置icon
    }, {
        name: '22,
    }, {
        name: '33,
        // 设置文本为红色
        textStyle: {
            color: 'red'
        }
    }],
}

效果实现

实现三类三个柱子

效果

• 用三个类目重叠实现该效果
• 单独设置图例，只显示有数据的那个类目

源码

<template>
  <div :class="className" :style="{height:height,width:width}"/>
</template>

<script>
import echarts from 'echarts'
import {deepCopy, isArray} from '@/common/js/c_common.js'
import resize from './mixins/resize'

  export default {
    mixins: [resize],
    props: {
      className: {
        type: String,
        default: 'chart'
      },
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '100%'
      },
      autoResize: {
        type: Boolean,
        default: true
      },
      chartData: {
        type: Object,
        required: true,
        default() {
            return {
                xdata: [],
                ydatas: []
            }
        }
      }
    },
    data() {
      return {
        chart: null,
        first_series: {
          name: '年轻人',
          data: [],
          type: 'bar',
          barGap: '-100%',
          barWidth: '10',
          itemStyle: {
              //柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
              normal: {
                  color: '#1DBBFF',
                  //柱形图圆角，初始化效果
                  barBorderRadius:[15, 15, 0, 0]
              }
          },
          tooltip: {
              formatter: '{b} : {c0}',
          }
        },
        second_series: {
          name: '中年人',
          data: [],
          type: 'bar',
          barGap: '-100%',
          barWidth: '10',
          itemStyle: {
              //柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
              normal: {
                  color: '#FFB064',
                  //柱形图圆角，初始化效果
                  barBorderRadius:[15, 15, 0, 0]
              }
          },
          tooltip: {
              formatter: '{b} : {c0}',
          }
        },
        third_series: {
          name: '老年人',
          data: [],
          type: 'bar',
          barGap: '-100%',
          barWidth: '10',
          itemStyle: {
              //柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
              normal: {
                  color: '#EC7AFF',
                  //柱形图圆角，初始化效果
                  barBorderRadius:[15, 15, 0, 0]
              }
          },
          tooltip: {
              formatter: '{b} : {c0}',
          }
        }
      } 
    },
    watch: {
      chartData: {
        deep: true,
        handler(val) {
          this.setOptions(val)
        }
      },
      forceInit(n,o) {
          if(n) {
              setTimeout(()=>{
                  this.initChart()
              }, 500)
          }
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.initChart()
      })
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      this.chart.dispose()
      this.chart = null
    },
    methods: {
      initChart() {
        this.chart = echarts.init(this.$el, 'macarons')
        this.setOptions(this.chartData)
        this.chart.resize()
      },
      // 图表数据传参
      setOptions(chartData) {
        let series = []
        let serie1 = deepCopy(this.first_series)
        let serie2 = deepCopy(this.second_series)
        let serie3 = deepCopy(this.third_series)
        serie1.data = chartData.ydatas[0]
        serie2.data = chartData.ydatas[1]
        serie3.data = chartData.ydatas[2]
        series.push(serie1, serie2, serie3)
        this.chart.setOption(
          {
            title: {
                text: '人数/人',
                top: '10%',
                left: 5,
                textStyle: {
                    color: '#BEC2CC',
                    fontWeight: 'normal',
                    fontSize: '13px'
                }
            },
            tooltip: {
                trigger: 'item',
                axisPointer: {
                    type: 'none'
                },
                backgroundColor: 'rgba(255, 255, 255, 0.95)',
                // formatter: '{b0}: {c0}<br />{a}: {b}'
                textStyle: {
                  color: 'rgba(51, 51, 51, 1)'
                },
                extraCssText: 'box-shadow: 0px 1px 5px rgba(166, 188, 208, 0.4);padding: 10px;'
            },
            legend: {
                show: true,
                data: ['年轻人', '中年人', '老年人'],
                itemGap: 30,
                icon:"circle",
                itemWidth: 12,
                itemHeight: 12,
                textStyle: {
                  color: '#666666'
                },
                align: 'auto',
                top: 30,
            },
            grid: {
                left: 40,
                right: 20,
                bottom: '14%',
                top: '22%'
                // containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    // boundaryGap: false,
                    boundaryGap: ['20%', '20%'],  
                    axisLine: {
                        show: false, //x轴坐标轴轴线显示与否
                        lineStyle: {
                            color: '#BEC2CC'
                        }
                    },
                    axisTick: { //坐标轴刻度显示与否
                        show: false
                    },     
                    axisLabel: {
                        margin: 13,
                        color: '#A6ACBE'
                    },
                    data: chartData.xdata
                },
            ],
            yAxis: {
                type: 'value',  
                axisLine: {
                    show: false //y轴坐标轴轴线显示与否
                },
                axisTick: { //坐标轴刻度显示与否
                    show: false
                },                   
                axisLabel: {
                    color: '#A6ACBE' // Y轴文字颜色
                },
                splitLine: {
                    show: true,
                    lineStyle:{
                        type: 'dashed',
                        width: 1,
                        color: '#F1F1F1'
                  }
                },
            },
            series: series
          },true
          )
      }
    }
  }
</script>

使用

• 父组件使用及传参

<bar-chart :chartData="barChartData" :forceInit="barForceInit"></bar-chart>

barChartData: { 
      xdata: ['年轻人', '中年人', '老年人'],
      ydatas: [[420, 0, 0], [0, 320, 0], [0, 0, 280]]
},