echart 设置参数详解 折线图 折柱混合图

折柱混合图

<template>
  <div :class="className" :style="{height:height,width:width,left: '-20px',paddingTop:'10px'}" />
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'
// 折柱混合图
export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '370px'
    },
    autoResize: {
      type: Boolean,
      default: true
    },
    chartData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      chart: null
    }
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val)
      }
    }
  },
  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)
    },
    setOptions({ seriesData01, seriesData02, seriesData03, xData,titleText, xLineColor, yLineColor, gridLineColor, isShowXZhou, isShowYZhou } = {}) {
      this.chart.setOption({
        title: {
            text: titleText,
            textStyle: {
                color: '#fff',// 文字颜色
                fontSize: 18,// 文字大小
                fontWeight: 700
            }
        },
        tooltip: {//触发点 弹框样式
            trigger: 'axis',
            borderColor:'#85b3f1',
            backgroundColor:'rgba(0, 0, 0, .3)',//调节背景颜色与透明度
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#eee'
                }
            }
        },
        grid: {
          backgroundColor: '#fff',
          containLabel: false
        },
        toolbox: {
            feature: {
                // dataView: { show: true, readOnly: false },
                magicType: { show: true, type: ['line', 'bar'] },
                restore: { show: true },
                saveAsImage: { show: true }
            }
        },
        legend: {
            orient: 'horizontal', // 'vertical'
            x: 'center', // 'center' | 'left' | {number},
            y: 'top', // 'center' | 'bottom' | {number}
            backgroundColor: 'transparent',
            borderColor: 'transparent',
            borderWidth: 1,
            padding: 10,    // [5, 10, 15, 20]
            itemGap: 20,
            textStyle: {color: '#ddd'},//文字颜色
            data: ['当前用电量', '同期用电量', '同比涨幅']
        },
        xAxis: [
            {
                type: 'category',
                data: xData,
                axisLine: {  //这是x轴文字颜色
                    show: isShowXZhou || false,
                    lineStyle: {
                        color: xLineColor || "#ccc",
                    }
                },
                splitArea : {show : false}//保留网格区域
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '同期用电量',
                min: 0,
                // max: 250,
                // interval: 500,//设置刻度
                axisLabel: {
                    formatter: '{value} Kwh',
                },
                axisLine: {  //这是y轴文字颜色
                    show: isShowYZhou || false,
                    lineStyle: {
                        color: yLineColor || "#ccc",
                    }
                },
                splitLine: {//y轴的网格 水平线样式
                    lineStyle: {
                        color: gridLineColor || "#ccc",
                        width: 1,
                        type: 'solid'
                    }
                },
                splitArea : {show : false}//保留网格区域
            },
            {
                type: 'value',
                name: '同比涨幅',
                min: 0,
                max: 25,
                interval: 5,
                axisLabel: {
                    formatter: '{value} %',
                },
                axisLine: {  //这是y轴文字颜色
                    show: isShowYZhou || false,
                    lineStyle: {
                        color: yLineColor || "#ccc",
                    }
                },
                splitLine: {//y轴的网格
                    lineStyle: {
                    color: gridLineColor || "#ccc",
                    width: 1,
                    type: 'solid'
                    }
                },
            },
            
        ],
        series: [
            {
                name: '当前用电量',
                type: 'bar',
                data: seriesData01,
                itemStyle: {//柱图背景色
                // 　　color: '#111'
                }, 
            },
            {
                name: '同期用电量',
                type: 'bar',
                data: seriesData02
            },
            {
                name: '同比涨幅',
                type: 'line',
                yAxisIndex: 1,
                // areaStyle: {
                //     normal: {
                //         color: '#8cd5c2' //改变折线区域颜色
                //     }
                // },
                data: seriesData03
            }
        ]
      })
    }
  }
}
</script>

折线图

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

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'
// 折线图
export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '290px'
    },
    autoResize: {
      type: Boolean,
      default: true
    },
    chartData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      chart: null
    }
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val)
      }
    }
  },
  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)
    },
    setOptions({ seriesData, titleText, xLineColor, yLineColor, gridLineColor, isShowXZhou, isShowYZhou } = {}) {
      this.chart.setOption({
        title: {
            text: titleText,
            textStyle: {
                color: '#fff',// 文字颜色
                fontSize: 18,// 文字大小
                fontWeight: 700
            }
        },
        grid: {
          left: 10,
          right: 10,
          bottom: 20,
          top: 50,
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          // borderWidth:'0',
          borderColor:'#85b3f1',
          backgroundColor:'rgba(0, 0, 0, .3)',//通过设置rgba调节背景颜色与透明度
          axisPointer: {
            animation: false
          },
          formatter: function (params) {
            var htmlStr = '';
            htmlStr += '<span style="color:#fff;">' + params[0].axisValue + ' 总耗电量:' + params[0].value + 'Kwh' +'</span>' ;
            return  htmlStr
          },
        },
        xAxis: {
          type: 'category',
          data: ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00','14:00', '16:00', '18:00', '20:00', '22:00'],
          boundaryGap: false,
          axisTick: {//刻度线
            show: false
          },
          
          axisLine: {  //这是x轴文字颜色
            show: isShowXZhou || false,
            lineStyle: {
                color: xLineColor || "#ccc",
            }
          }
        },
        yAxis: {
          axisTick: {
            show: false
          },
          axisLine: {  //这是y轴文字颜色
              show: isShowYZhou || false,
              lineStyle: {
                  color: yLineColor || "#ccc",
              }
          },
          splitLine: {//y轴的网格
            lineStyle: {
              color: gridLineColor || "#ccc",
              width: 1,
              type: 'solid'
            }
          },
        },
        series: [{
          type: 'line',
          itemStyle: {
            normal: {
              color: '#545E6B',
              lineStyle: {
                color: '#545E6B',
                width: 2
              }
            }
          },
          smooth: true,
          itemStyle : { 
                normal : { 
                    color:'#00DAEE', //改变折线点的颜色
                    lineStyle:{ 
                        color:'#00F5FF', //改变折线颜色
                        width: 1,//改变粗细  
                    } 
                } 
            },
            // areaStyle: {
            //     normal: {
            //         color: '#8cd5c2' //改变折线区域颜色
            //     }
            // },
          data: seriesData,
        },
        ]
      })
    }
  }
}
</script>