一：先在官网下载
https://www.echartsjs.com/zh/download.html
然后再建立工程，导入这两个包：
写代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>ECharts</title> 6 <!-- 引入 echarts.js --> 7 <!-- 这里是加载刚下好的echarts.min.js，注意路径 --> 8 <script src="echarts.min.js"></script> 9 </head> 10 <body> 11 <!-- 为ECharts准备一个具备大小（宽高）的Dom --> 12 <div id="main" style="width: 1000px;height:600px;"></div> 13 <script type="text/javascript"> 14 // 基于准备好的dom，初始化echarts实例 15 var myChart = echarts.init(document.getElementById(‘main‘)); 16 var option = { 17 title : { 18 text: ‘某地区蒸发量和降水量‘, 19 subtext: ‘纯属虚构‘ 20 }, 21 tooltip : { 22 trigger: ‘axis‘ 23 }, 24 legend: { 25 data:[‘蒸发量‘,‘降水量‘] 26 }, 27 toolbox: { 28 show : true, 29 feature : { 30 dataView : {show: true, readOnly: false}, 31 magicType : {show: true, type: [‘line‘, ‘bar‘]}, 32 restore : {show: true}, 33 saveAsImage : {show: true} 34 } 35 }, 36 calculable : true, 37 xAxis : [ 38 { 39 type : ‘category‘, 40 data : [‘1月‘,‘2月‘,‘3月‘,‘4月‘,‘5月‘,‘6月‘,‘7月‘,‘8月‘,‘9月‘,‘10月‘,‘11月‘,‘12月‘] 41 } 42 ], 43 yAxis : [ 44 { 45 type : ‘value‘ 46 } 47 ], 48 series : [ 49 { 50 name:‘蒸发量‘, 51 type:‘bar‘, 52 data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3], 53 markPoint : { 54 data : [ 55 {type : ‘max‘, name: ‘最大值‘}, 56 {type : ‘min‘, name: ‘最小值‘} 57 ] 58 }, 59 markLine : { 60 data : [ 61 {type : ‘average‘, name: ‘平均值‘} 62 ] 63 } 64 }, 65 { 66 name:‘降水量‘, 67 type:‘bar‘, 68 data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3], 69 markPoint : { 70 data : [ 71 {name : ‘年最高‘, value : 182.2, xAxis: 7, yAxis: 183}, 72 {name : ‘年最低‘, value : 2.3, xAxis: 11, yAxis: 3} 73 ] 74 }, 75 markLine : { 76 data : [ 77 {type : ‘average‘, name : ‘平均值‘} 78 ] 79 } 80 } 81 ] 82 }; 83 84 // 使用刚指定的配置项和数据显示图表。 85 myChart.setOption(option); 86 myChart.on(‘click‘, function (params) { 87 window.open(‘https://www.baidu.com/s?wd=‘ + encodeURIComponent(params.name)); 88 }); 89 </script> 90 </body> 91 </html>
原文：https://www.cnblogs.com/smartisn/p/11788471.html