<scripttype="text/javascript"> requireconfig({ paths: { echarts:'/echarts/echarts', 'echarts/chart/bar':'/echarts/echarts',//这里需要注意的是除了mapchart使用的配置文件为echarts-map之外， 其他的图形引用的配置文件都为echarts，这也是一般的图形跟地图的区别 'echarts/chart/line':'/echarts/echarts' } }); require( [ 'echarts', 'echarts/chart/bar', 'echarts/chart/line' ], function (ec) { varmyChart=ecinit(documentgetElementById('main')); option= { tooltip: { trigger:'axis' }, legend: { data: ['邮®¨º件t营®a销¨²','联¢a盟?广?告?','视º¨®频¦Ì广?告?','直¡À接¨®访¤?问¨º','搜?索¡Â引°y擎?'] }, toolbox: { show:true, feature: { mark:true, dataView: { readOnly:false }, magicType: ['line','bar'], restore:true, saveAsImage:true } }, calculable:true, xAxis: [ { type:'category', boundaryGap:false, data: ['周¨¹一°?','周¨¹二t','周¨¹三¨y','周¨¹四?','周¨¹五?','周¨¹六¢¨´','周¨¹日¨?'] } ], yAxis: [ { type:'value', splitArea: { show:true } } ], series: [ { name:'邮®¨º件t营®a销¨²', type:'line', stack:'总Á¨¹量¢?', data: [120,132,101,134,90,230,210] }, { name:'联¢a盟?广?告?', type:'line', stack:'总Á¨¹量¢?', data: [220,182,191,234,290,330,310] }, { name:'视º¨®频¦Ì广?告?', type:'line', stack:'总Á¨¹量¢?', data: [150,232,201,154,190,330,410] }, { name:'直¡À接¨®访¤?问¨º', type:'line', stack:'总Á¨¹量¢?', data: [320,332,301,334,390,330,320] }, { name:'搜?索¡Â引°y擎?', type:'line', stack:'总Á¨¹量¢?', data: [820,932,901,934,1290,1330,1320] } ] }; myChartsetOption(option); } ); </script> <divid="main1"style="height:500px;border:1px solid #ccc;padding:10px;"></div> <scripttype="text/javascript"> requireconfig({ paths: { echarts:'/echarts/echarts', 'echarts/chart/bar':'/echarts/echarts', 'echarts/chart/line':'/echarts/echarts' } }); require( [ 'echarts', 'echarts/chart/bar', 'echarts/chart/line' ], function (ec) { varmyChart=ecinit(documentgetElementById('main1')); option= { title: { text:'未¡ä来¤¡ä一°?周¨¹气?温?变À?化¡¥', subtext:'纯ä?属º?虚¨¦构1' }, tooltip: { trigger:'axis' }, legend: { data: ['最Á?高?气?温?','最Á?低̨ª气?温?'] }, toolbox: { show:true, feature: { mark:true, dataView: { readOnly:false }, magicType: ['line','bar'], restore:true, saveAsImage:true } }, calculable:true, xAxis: [ { type:'category', boundaryGap:false, data: ['周¨¹一°?','周¨¹二t','周¨¹三¨y','周¨¹四?','周¨¹五?','周¨¹六¢¨´','周¨¹日¨?'] } ], yAxis: [ { type:'value', axisLabel: { formatter:'{value} °?C' }, splitArea: { show:true } } ], series: [ { name:'最Á?高?气?温?', type:'line', itemStyle: { normal: { lineStyle: { shadowColor:'rgba(0,0,0,4)' } } }, data: [11,11,15,13,12,13,10] }, { name:'最Á?低̨ª气?温?', type:'line', itemStyle: { normal: { lineStyle: { shadowColor:'rgba(0,0,0,4)' } } }, data: [-2,1,2,5,3,2,0] } ] }; myChartsetOption(option); } ); </script> <divid="main2"style="height:500px;border:1px solid #ccc;padding:10px;"></div> <scripttype="text/javascript"> requireconfig({ paths: { echarts:'/echarts/echarts', 'echarts/chart/bar':'/echarts/echarts', 'echarts/chart/line':'/echarts/echarts' } }); require( [ 'echarts', 'echarts/chart/bar', 'echarts/chart/line' ], function (ec) { varmyChart=ecinit(documentgetElementById('main2')); option= { title: { text:'某3楼£¤盘¨¬销¨²售º?情¨¦况?', subtext:'纯ä?属º?虚¨¦构1' }, tooltip: { trigger:'axis' }, legend: { data: ['意°a向¨°','预¡è购o','成¨¦交?'] }, toolbox: { show:true, feature: { mark:true, dataView: { readOnly:false }, magicType: ['line','bar'], restore:true, saveAsImage:true } }, calculable:true, xAxis: [ { type:'category', boundaryGap:false, data: ['周¨¹一°?','周¨¹二t','周¨¹三¨y','周¨¹四?','周¨¹五?','周¨¹六¢¨´','周¨¹日¨?'] } ], yAxis: [ { type:'value' } ], series: [ { name:'成¨¦交?', type:'line', smooth:true, itemStyle: { normal: { areaStyle: { type:'default'}} }, data: [10,12,21,54,260,830,710] }, { name:'预¡è购o', type:'line', smooth:true, itemStyle: { normal: { areaStyle: { type:'default'}} }, data: [30,182,434,791,390,30,10] }, { name:'意°a向¨°', type:'line', smooth:true, itemStyle: { normal: { areaStyle: { type:'default'}} }, data: [1320,1132,601,234,120,90,20] } ] }; myChartsetOption(option); } ); </script>
3.2.4 完成以上操作之后效果图如下：
