Echarts在线免费图表

 
            var option = {
     title: [ // 所有文字信息
{text: '今日订单总金额',x: 'center',y: '4.5%',
             textStyle: {fontSize: 20}},
			 {text: '今日成交订单数',x: '14.7%',y: '18%',
			  textStyle: {fontSize: 20}},
			 {text: '34220',x: '15.3%',y: '23%',
			  textStyle: {fontSize: 40}},
			 {text: '订单成功占比',x: 'center',y: '18%',
			  textStyle: {fontSize: 20}},
			 {text: '93.25%',x: 'center',y: '23%',
			  textStyle: {fontSize: 40}},
			 {text: '今日取消订单数',x: '74.5%',y: '18%',
			  textStyle: {fontSize: 20}},
			 {text: '2310',x: '76%',y: '23%',
			  textStyle: {fontSize: 40}},
			 {text: '购买用户\n\n设备分布',
x: '19.8%',y: '45%',
   			  textAlign: 'center',textBaseline: 'middle',
			  textStyle: {fontSize: 20}},
			 {text: '购买用户\n\n年龄分布',
x: '49.8%',y: '45%',
			  textAlign: 'center',textBaseline: 'middle',
			  textStyle: {fontSize: 20}},
			 {text: '购买用户\n\n渠道分布',
x: '79.8%',y: '45%',
			  textAlign: 'center',textBaseline: 'middle',
			  textStyle: {fontSize: 20}},
			 {text: '4509834',x: 'center',y: '9%',
			  textStyle: {fontSize: 60}},
			 {text: '订单量 TOP10 城市',x: '18%',y: '60%',
			  textStyle: {fontSize: 20}},
			 {text: '订单量分时段统计',x: '65%',y: '60%',
			  textStyle: {fontSize: 20}}],
     tooltip: {
         trigger: 'axis',
         axisPointer: {type: 'shadow'}},
     backgroundColor:'rgba(20,20,100,1)', // 背景色
     grid: [{left: '5%', // 网格部分
             right: '55%',
             top: '65%',
             bottom: '5%',
             containLabel: true},
            {gridindex: 1,
             left: '50%',
             right: '5%',
             top: '65%',
             bottom: '5%',
             containLabel: true}],
     xAxis:[{type: 'value', // x轴
             axisLabel: {
             formatter: '{value} 件'},
             boundaryGap: [0, 0.02]},
            {gridIndex: 1,
             type: 'category',
             boundaryGap: false,
             data: ['0时', '1时', '2时', '3时', '4时', '5时', 
		    '6时', '7时', '8时', '9时', '10时', '11时', 
'12时', '13时', '14时', '15时', '16时', '17时', 
'18时', '19时', '20时', '21时', '22时', '23时']}],
     yAxis:[{type: 'category', // y轴
             data: ['城市A', '城市B', '城市C', '城市D', '城市E', 
'城市F', '城市G', '城市H', '城市I', '城市J'],
             axisLabel: {interval: 0}},
            {gridIndex: 1,
             type: 'value',
             axisLabel: {formatter: '{value} '}}],
     series:[{type: 'bar', // 条形图
             label: {normal: {
                     show: true,
                     position: 'right'}},
             data: [4320, 3529, 3105, 2304, 2094, 
1790, 1565, 1120, 780, 409]},
	     {type: 'pie', // 饼图
             center: ['20%', '45%'],
             radius: ['15%', '20%'],
             label: {normal: {formatter: '{b} :\n{c}({d}%)'}},
             data: [{value: 1032,name: 'Mac'},
		    {value: 10096,name: 'iphone'},
		    {value: 1240,name: 'iPad'},
		    {value: 15098,name: 'Android'},
		    {value: 4098,name: 'Windows'},
		    {value: 2656,name: '其它'}]},
	     {type: 'pie', // 饼图
             center: ['50%', '45%'],
             radius: ['15%', '20%'],
             label: {
                 normal: {formatter: '{b} :\n{c}({d}%)'}},
             data: [{value: 11045,name: '小于25岁'},
		     {value: 20230,name: '25岁-40岁'},
		     {value: 2945,name: '大于40岁'}]},
{type: 'pie', // 饼图
             center: ['80%', '45%'],
             radius: ['15%', '20%'],
             label: {normal: {formatter: '{b} :\n{c}({d}%)'}},
             data: [{value: 1851,name: '天猫'},
		    {value: 10234,name: '淘宝'},
		    {value: 14575,name: '京东'},
		    {value: 7560,name: '拼多多'}]},
	     {xAxisIndex: 1,
             yAxisIndex: 1,
             type: 'line', // 折线图
             data: ['416', '382', '318', '184', '215', '265', 
'557', '954', '1627', '1180', '2416', '2678', 
'3021', '2590','2100','1809','2300','2539'],
             smooth: true,
             markPoint: {
                 data: [{type: 'max',name: '最大值',symbolSize: 60},
	     	        {type: 'min',name: '最小值',symbolSize: 60}],
                 itemStyle: {normal: {color: '#F36100'}}},
             markLine: {
                 data: [{type: 'average',name: '平均值'}]
             }
         }
     ]
 };