1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script src="static/jquery.js"></script> 7 <script src="static/echarts4.js"></script> 8 </head> 9 <script> 10 $(function() { 11 var x = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']; 12 var series = [{ 13 name: '总量', 14 type: 'line', 15 label: { 16 normal: { 17 show: true, 18 position: 'top' 19 } 20 }, 21 data: [0, 50, 100, 150, 200, 150, 100] 22 }] 23 var option = { 24 xAxis: [{ 25 type: 'category', 26 boundaryGap: false, 27 data: x 28 }], 29 yAxis: [{ 30 type: 'value' 31 }], 32 series: series 33 }; 34 var effectScatterData = [0, 50, 100, 150, 200, {value:150,symbolSize:30,}, 100] 35 var effectScatter = { 36 type: 'effectScatter', 37 coordinateSystem: 'cartesian2d', 38 data: effectScatterData, //2d坐标系 39 symbolSize:0, 40 showEffectOn: 'render', 41 rippleEffect: { 42 brushType: 'stroke' 43 }, 44 hoverAnimation: true, 45 itemStyle: { 46 normal: { 47 color: 'red', 48 shadowBlur: 10, 49 shadowColor: '#333' 50 } 51 }, 52 zlevel: 1 53 }; 54 option.series.push(effectScatter); 55 myChart = echarts.init(document.getElementById('fleshChart')); 56 myChart.setOption(option) 57 }) 58 </script> 59 60 <body> 61 <div id="fleshChart" style="100%;height:500px;"> 62 </div> 63 </body> 64 65 </html>