Echarts在线免费图表

 
            option = {
   backgroundColor: '#fff',
 tooltip: {
  trigger: 'axis',
 },
 title: {
        // text: `{a|分部毛利率图}`,
        textStyle: {
            rich: {
                a: {
                    fontSize: 16,
                    fontWeight: 600,
                },
            },
        },
        top: '2%',
        left: '2%',
    },
    legend: {
        data: ['增值服务', '金融科技及企业服务','网络广告', '总毛利率'],
        textStyle: {
            align: 'right',
        },
        top: '2%',
        right: '2%',
    },
 grid: {
  left: '3%',
  right: '4%',
  bottom: '3%',
  containLabel: true,
 },
 xAxis: {
  type: 'category',
  boundaryGap: false, //坐标轴两边留白
  data: ['2016', '2017', '2018', '2019', '2020', '2021'],
  axisLabel: {
   //坐标轴刻度标签的相关设置。
   interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
   //	margin:15,
   textStyle: {
    color: '#1B253A',
    fontStyle: 'normal',
    fontFamily: '微软雅黑',
    fontSize: 12,
   },
  },
  axisTick: {
   show: false,
  },
  axisLine: {
   lineStyle: {
    color: '#E5E9ED',
    // opacity:0.2
   },
  },
  splitLine: {
   show: false,
  },
 },
 yAxis: [
  {
   type: 'value',
   axisLabel: {
    textStyle: {
     color: '#a8aab0',
     fontStyle: 'normal',
     fontFamily: '微软雅黑',
     fontSize: 12,
    },
   },
   axisLine: {
    show: false,
   },
   axisTick: {
    show: false,
   },
   splitLine: {
    show: true,
    lineStyle: {
     color: '#E5E9ED',
     // 	opacity:0.1
    },
   },
   axisLabel: {
                show: true,
                margin: 20,
                formatter: '{value} %',
            },
  },
 ],
 series: [
  {
   name: '增值服务',
   type: 'line',
   itemStyle: {
    normal: {
     color: '#1EE882',
     lineStyle: {
      color: '#1EE882',
      width: 1,
     },
    //  areaStyle: {
    //   color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
    //    {
    //     offset: 0,
    //     color: 'rgba(30,232,130,0)',
    //    },
    //    {
    //     offset: 1,
    //     color: 'rgba(30,232,130,0.5)',
    //    },
    //   ]),
    //  },
    },
   },
   data: [65, 60, 58, 53, 54, 52],
  },
  {
   name: '金融科技及企业服务',
   type: 'line',
   itemStyle: {
    normal: {
     color: 'rgba(180,20,215,1)',
     lineStyle: {
      color: 'rgba(180,20,215,1)',
      width: 1,
     },
    //  areaStyle: {
    //   color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
    //    {
    //     offset: 0,
    //     color: 'rgba(253,222,9,0)',
    //    },
    //    {
    //     offset: 1,
    //     color: 'rgba(253,222,9,0.5)',
    //    },
    //   ]),
    //  },
    },
   },
   data: [0, 0, 25, 27, 28, 30],
  },
  {
   name: '网络广告',
   type: 'line',
   itemStyle: {
    normal: {
     color: 'rgba(20,111,215,1)',
     lineStyle: {
      color: 'rgba(20,111,215,1)',
      width: 1,
     },
    //  areaStyle: {
    //   color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
    //    {
    //     offset: 0,
    //     color: 'rgba(20,111,215,0)',
    //    },
    //    {
    //     offset: 1,
    //     color: 'rgba(20,111,215,0.5)',
    //    },
    //   ]),
    //  },
    },
   },
   data: [43, 37, 36, 49, 51, 46],
  },
  {
   name: '总毛利率',
   type: 'line',
   itemStyle: {
    normal: {
     color: 'rgba(250,34,71,1)',
     lineStyle: {
      color: 'rgba(250,34,71,1)',
      width: 1,
     },
    //  areaStyle: {
    //   color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
    //    {
    //     offset: 0,
    //     color: 'rgba(250,34,71,0)',
    //    },
    //    {
    //     offset: 1,
    //     color: 'rgba(250,34,71,0.5)',
    //    },
    //   ]),
    //  },
    },
   },
   data: [56, 49, 45, 44, 46, 44],
  },
 ],
};