Echarts在线免费图表

 
            const legendData = {
  对外投资: true,
  吸收资本: true
}
const nameData = Object.keys(legendData)
const barDate = [10, 20, 30, 40, 50, 10]

option = {
  animation: true,
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    },
    backgroundColor: '#fff',
    borderColor: 'rgba(75, 253, 238, 0.4)',
    textStyle: {
      color: '#333'
    },
    formatter: '{b} <br/>{a} : {c}<br/> {a2} : {c2}'
  },
  grid: {
    left: '5%',
    top: '10%',
    bottom: '10%',
    right: '5%',
    containLabel: true
  },
  legend: {
    show: true,
    selected: legendData,
    bottom: 0,
    itemWidth: 18,
    itemHeight: 10
  },
  xAxis: {
    data: [
      '1月',
      '2月',
      '3月',
      '4月',
      '5月',
      '6月'
    ],
    axisLine: {
      show: true, // 显示X轴轴线
      lineStyle: {
        color: '#EBECEF'
      }
    },
    axisTick: {
      show: false
    },
    axisLabel: {
      show: true,
      margin: 14,
      fontSize: 12,
      textStyle: {
        color: '#758396' // X轴文字颜色
      }
    }
  },
  yAxis: [
    {
      type: 'value',
      nameTextStyle: {
        color: '#758396',
        fontSize: 12,
        padding: 10
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: 'rgba(52,78,130,0.2)',
          width: 1,
          type: 'dashed'
        }
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: false,
        lineStyle: {
          color: 'rgba(52,78,130,0.2)'
        }
      },
      axisLabel: {
        show: true,
        margin: 14,
        fontSize: 12,
        textStyle: {
          color: '#758396'
        }
      }
    },
    {
      type: 'value',
      splitLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: false
      },
      axisLabel: {
        show: false,
        margin: 14,
        fontSize: 12,
        textStyle: {
          color: '#758396'
        },
        formatter: '{value} %'
      }
    }
  ],
  series: [
    {
      name: nameData[0],
      type: 'bar',
      barWidth: 12,
      itemStyle: {
        normal: {
          color: '#00A1A3',
          borderColor: '#fff'
        }
      },
      data: barDate,
      z: 3
    },
    {
      // 分隔
      name: '',
      type: 'pictorialBar',
      itemStyle: {
        normal: {
          color: '#fff',
          borderColor: '#000'
        }
      },
      symbolRepeat: 'fixed',
      symbolMargin: 2,
      symbol: 'rect',
      symbolClip: true,
      symbolSize: [12, 2],
      symbolPosition: 'start',
      // symbolOffset: [-4, 1],
      data: barDate,
      width: 2,
      z: 4
    },
    {
      name: nameData[1],
      type: 'line',
      yAxisIndex: 1,
      smooth: true, // 平滑曲线显示
      showAllSymbol: false, // 显示所有图形。
      symbolSize: 9,
      symbolColor: '#eee',
      symbol: 'diamond',
      lineStyle: {
        width: 2,
        color: '#00A7E7'
      },
      itemStyle: {
        color: '#00A7E7',
        shadowColor: '#D9F2FC',
        borderColor: '#D9F2FC',
        borderWidth: 1
      },
      symbolOffset: [0, 0],
      data: [1, 2, 3, 4, 3, 1, 2, 3, 4, 3, 1, 4],
      z: 5
    }
  ]
}