常用的Echart的 一些配置（折线图双Y轴）

一、折线图和柱状图

 xAxis: {
             axisLine:{ // 是否显示坐标线
               show:false,
             },
              splitLine:{
                     show:false
                   }, // 横线分割线
                 axisLabel: {
                  textStyle: {
                    color: '#fff'
                  }
                },
              type: 'value',
              boundaryGap: [0, 0.01],
          },
          yAxis: {
             axisLine:{ // 是否显示坐标线
               show:false,
             },
             splitLine:{
                     show:false
                   }, // 横线分割线
                 axisLabel: {
                  textStyle: {
                    color: '#fff'
                  }
                },
              type: 'category',
              data: ['福建', '上海', '广州', '海南', '湖北']
          },

二、柱形图设置

series: [
            
              {
                 itemStyle: {  // 柱条颜色不同
              　　normal: { 
              　　　　color: function(params) { 
                      　　　　　//首先定义一个数组 
                      　　　　　var colorList = [ 
                      　　　　　　'#00C6FF','#F19610','#6054FF','#0273E2','#8A01E0'
                      　　　　　]; 
                      　　　　　return colorList[params.dataIndex] 
                      　　　　}, 
                      　　　　　//以下为是否显示 
                      　　　　label: { 
                      　　　　　　show: true 
                      　　　　} 
                      　　} 
                      } ,
                  type: 'bar',
                  barWidth: 20, // 柱条的粗细
                  barCategoryGap:'15%',
                  data: [1830, 2349, 2934, 1970, 2330],
              },
          ]

三、折线图

 series: [{
                data: [800,1000,800,1000,934, 1290, 1130, 1320],
                type: 'line',
                smooth: true,
                lineStyle:{
                  color:'#00D6FF'
                },
                showSymbol: false, // 取消线上标记点
                areaStyle: {
                  color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: 'rgb(0, 234, 255, 0.47)' // 0% 处的颜色
                        }, {
                            offset: 1, color: 'rgba(255, 255, 255, 0)' // 100% 处的颜色
                        }],
                        global: false // 缺省为 false
                    }
                }
            }]

再提上一点：关于折线图实现双Y轴的对比效果：

chartLineData = {
  color: COLOR_LIST,
  tooltip: {
    trigger: "axis",
  },
  legend: {
    orient: "vertical",
    right: "0",
    width: 140,
    top: "24",
    align: "left",
    icon: "circle",
    textStyle: {
      color: "#333",
      fontWeight: 400,
      fontSize: 14,
      fontFamily: "MicrosoftYaHei",
    },
    tooltip: {
      show: true,
      trigger: "item",
      formatter: function (tool) {
        return `${tool.name}`;
      },
    },
    formatter: function (name) {
      return name.length > 9 ? name.slice(0, 9) + "..." : name;
    },
  },
  grid: {
    top: "20%",
    left: "3%",
    right: "13%",
    bottom: "2%",
    containLabel: true,
  },
  xAxis: {
    axisLine: {
      lineStyle: {
        color: "#C5C8CE",
        width: 1,
      },
    },
    type: "category",
    boundaryGap: false,
    data: [],
    splitLine: {
      show: false,
    },
  },
  // y轴为两条数据
  yAxis: [
    {
    // 获取区间刻度
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        name,
        type: "value",
        min: 0,
        splitNumber: 5,
        interval: Math.ceil(Math.max.apply(null, data) / 5),
        max: Math.ceil(Math.max.apply(null, data) / 5) * 5,
        axisLabel: {
          formatter: "{value} 元",
        },
      };
  }, {
    // 获取区间刻度
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        name,
        type: "value",
        min: 0,
        splitNumber: 5,
        interval: Math.ceil(Math.max.apply(null, data) / 5),
        max: Math.ceil(Math.max.apply(null, data) / 5) * 5,
        axisLabel: {
          formatter: "{value} 元",
        },
      };
  }],
  series: [
  {
          smooth: true,
          name: "",
          type: "line",
          data: [],
        },
        {
          smooth: true,
          name: "",
          yAxisIndex: 1, // 右坐标轴，很关键的1，右边才可以显示
          type: "line",
          data: [],
        }],
};

四、中国地图

<template>
  <div class="echarts">
    <div :style="{height:'400px',width:'100%'}" ref="myEchart"></div>
  </div>
</template>
<script>
  import echarts from "echarts";
  //   import '../../node_modules/echarts/map/js/world.js'
  import '../../../node_modules/echarts/map/js/china.js' // 引入中国地图数据
  export default {
    name: "echarts",
    props: ["userJson"],
    data() {
      return {
        chart: null
      };
    },
    mounted() {
      this.chinaConfigure();
    },
    beforeDestroy() {
      if (!this.chart) {
        return;
      }
      this.chart.dispose();
      this.chart = null;
    },
    methods: {
      chinaConfigure() {
        console.log(this.userJson)
        let myChart = echarts.init(this.$refs.myEchart); //这里是为了获得容器所在位置    
        window.onresize = myChart.resize;
        myChart.setOption({ // 进行相关配置
          // backgroundColor: "#02AFDB",
          tooltip: {}, // 鼠标移到图里面的浮动提示框
          dataRange: {
            show: false,
            min: 0,
            max: 1000,
            text: ['High', 'Low'],
            realtime: true,
            calculable: true,
            color: ['orangered', 'yellow', 'lightskyblue']
          },
          geo: { // 这个是重点配置区
            map: 'china', // 表示中国地图
            roam: true,
            label: {
              normal: {
                show: true, // 是否显示对应地名
                textStyle: {
                  color: 'rgba(0, 0, 0)'
                }
              }
            },
            itemStyle: {
              normal: {
                borderColor: 'rgba(0, 0, 0, 0.2)'
              },
              emphasis: {
                areaColor: null,
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowBlur: 20,
                borderWidth: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          },
          series: [{
              type: 'scatter',
              coordinateSystem: 'geo' // 对应上方配置
            },
            {
              name: '扫码次数', // 浮动框的标题
              type: 'map',
              geoIndex: 0,
              data: [{
                "name": "北京",
                "value": 5991
              }, {
                "name": "上海",
                "value": 1421
              }, {
                "name": "黑龙江",
                "value": 441
              }, {
                "name": "深圳",
                "value": 921
              }, {
                "name": "湖北",
                "value": 8101
              }, {
                "name": "四川",
                "value": 4531
              }]
            }
          ]
        })
      }
    }
  }
</script>

时间Y轴的格式处理

import moment from 'moment'
// value是时间戳格式转为时分秒	
moment.utc(value * 1000).format('H[时]m[分]s[秒]')