兼容ie8，echarts因为在官网下载的现成的包都不兼容ie8所以是到官网在线定制的兼容ie8（需要勾选兼容ie8选项）的包，只有简单的饼状图，柱状图，折线图。
代码
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> 6 <title>Echarts</title> 7 <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/> 8 <script src="js/echarts.min.js"></script> 9 10 <!-- 在ie8中兼容bootstrap --> 11 <!--[if lte IE 9]> 12 <script src="js/respond.min.js"></script> 13 <script src="js/html5.min.js"></script> 14 <script src="js/PIE.js"></script> 15 <![endif]--> 16 <style type="text/css"> 17 #bar,#pie{ 18 height: 500px; 19 } 20 .m-top{ 21 margin-top: 20px; 22 } 23 </style> 24 </head> 25 <body> 26 <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM --> 27 <div class="container"> 28 <div class="row m-top"> 29 <div id="bar" class="col-md-6"></div> 30 <div id="pie" class="col-md-6"></div> 31 </div> 32 <!--<div style=" 500px;height:400px;"></div> 33 <div id="pie" style=" 700px;height:400px;"></div>--> 34 </div> 35 36 37 <script type="text/javascript"> 38 // 基于准备好的dom，初始化echarts实例 39 var barChart = echarts.init(document.getElementById('bar')); 40 var pieChart = echarts.init(document.getElementById('pie')); 41 42 // 指定柱状图表的配置项和数据 43 var option = { 44 title: { 45 text: '交易金额柱状图', 46 // padding:[5,10] 47 }, 48 tooltip: {}, 49 legend: { 50 // type:'plain', 51 data:['销量'], 52 }, 53 xAxis: { 54 data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] // X轴数据 55 }, 56 yAxis: { 57 // splitLine:{ show:false} //改设置不显示坐标区域内的y轴分割线 58 }, 59 series: [{ 60 name: '销量', 61 type: 'bar', 62 data: [5, 20, 36, 10, 10, 20] 63 }], 64 itemStyle: { 65 normal: { 66 // 设置柱子的颜色 67 // color:['#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622'] 68 color: function (params){ // 设置各数据颜色 69 var colorList = ['#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622']; 70 return colorList[params.dataIndex]; 71 } 72 }, 73 //鼠标悬停时： 74 emphasis: { 75 shadowBlur: 10, 76 shadowOffsetX: 0, 77 shadowColor: 'rgba(0, 0, 0, 0.5)' 78 } 79 } 80 }; 81 82 var option2 = { 83 title: { 84 text: '交易手续费', 85 left: 'center' 86 }, 87 tooltip : { 88 trigger: 'item', 89 formatter: "{a} <br/>{b} : {c} ({d}%)" 90 }, 91 legend: { 92 // orient: 'vertical', 93 // top: 'middle', 94 bottom: 10, 95 left: 'center', 96 data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] 97 }, 98 series : [ 99 { 100 name:'销量', 101 type: 'pie', 102 radius : '65%', 103 center: ['50%', '50%'], 104 selectedMode: 'single', 105 data:[ 106 {value:5,name: '衬衫'}, 107 {value:20, name: '羊毛衫'}, 108 {value:36, name: '雪纺衫'}, 109 {value:10, name: '裤子'}, 110 {value:10, name: '高跟鞋'}, 111 {value:20, name: '袜子'} 112 ], 113 itemStyle: { 114 normal: { 115 // 设置扇形的颜色 116 // color:['#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622'] 117 color: function (params){ 118 var colorList = ['#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622']; 119 return colorList[params.dataIndex]; 120 } 121 }, 122 emphasis: { 123 shadowBlur: 10, 124 shadowOffsetX: 0, 125 shadowColor: 'rgba(0, 0, 0, 0.5)' 126 } 127 } 128 } 129 ] 130 }; 131 // 使用指定的配置项和数据显示图表。 132 barChart.setOption(option); 133 pieChart.setOption(option2); 134 </script> 135 </body> 136 </html>