Echarts在线免费图表

 
            var colors = ["#37A2DA", "#ff3a3a"];

 option = {
       backgroundColor: "#ffffff",
title: {
        // text: `{a|年度利润图}`,
        textStyle: {
            rich: {
                a: {
                    fontSize: 16,
                    fontWeight: 600,
                },
            },
        },
        top: '2%',
        left: '2%',
    },
    legend: {
        data: ['净利润','净利润率'],
        textStyle: {
            align: 'right',
        },
        right: '2%',
        top: '2%',
        icon: 'diamond',
    },
    xAxis: [
        {
            type: 'category',
            axisTick: {
                alignWithLabel: true
            },
            data: ['2016','2017','2018','2019','2020','2021']
        }
    ],
    yAxis: [
       
        {
            type: 'value',
            position: 'left',
            max: 5000,
            axisLabel: {
                formatter: '{value}'
            }
        },
        {
            type: 'value',
            // min: 20,
            // max: 100,
            position: 'right',
            axisLabel: {
                formatter: '{value} %'
            }
        }
    ],
    series: [
    {
            name:'净利润',
            type:'bar',
            smooth: true,
            barMaxWidth: 20,
            itemStyle: {
        
        normal: {
          color: colors[0],
        lineStyle: {
          color: colors[0],
        },
               label: {
                  show: true, //开启显示
                  color: colors[0],
                  position: 'top', //在上方显示
               },
            },
      },
            yAxisIndex: 0,
            data:[414.47, 724.71, 799.84, 958.88, 1601.25, 2278.1]
        },
        {
            name:'净利润率',
            type:'line',
            smooth: true,
            itemStyle: {
        
        normal: {
          color: colors[1],
        lineStyle: {
          color: colors[1],
        },
               label: {
                  show: true, //开启显示
                  color: colors[1],
                  position: 'top', //在上方显示
                  formatter: function (res) {
                     if (res.value) {
                        return res.value + '%'
                     } else {
                        return 0
                     }
                  },
               },
            },
      },
            symbol: 'circle',
            symbolSize: 10,
            yAxisIndex: 1,
            data:[27.3, 30.5, 25.6, 25.4, 33.2, 40.6]
        },
        
    ]
};