由于项目需要自学了echarts，下面将学到的东西总结如下，如果有哪里写的不好，请批评指正
一、前期准备
1、使用echarts之前先要引入echarts.js，js可以到官网下载
2、写一个div容器用来装echarts内容，这个容器必须有高度，不然看不到内容。
3、在script中获取div容器的id，根据需要写option中的参数（也许你现在还不知道option是干嘛用的，不要着急往下看），使用setoption生成图表。
（代码如下）注：后面将不再对引入js，获取id，调用option生成图表做赘述
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <!-- 为ECharts准备一个具备大小（宽高）的Dom --> <div></div> <!-- 引入echarts.js --> <script src="js/echarts.js "></script> <script> 获取容器的id并赋值给变量myChart var myChart = echarts.init(document.getElementById('main')); /*用来配置参数*/ option = { } /*调用option生成图表*/ myChart.setOption(option) </script> </body> </html>
二、各种图表使用
1、柱状图代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <!-- 为ECharts准备一个具备大小（宽高）的Dom --> <div></div> <script src="js/echarts.js "></script> <script> var myChart = echarts.init(document.getElementById('main')); myChart.title = '坐标轴刻度与标签对齐'; option = { color: ['#3398DB'], tooltip : { trigger: 'axis', axisPointer : { // 坐标轴指示器，坐标轴触发有效 type : 'shadow' // 默认为直线，可选为：'line' | 'shadow' } }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis : [ { type : 'category', data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], axisTick: { alignWithLabel: true } } ], yAxis : [ { type : 'value' } ], series : [ { name:'直接访问', type:'bar', barWidth: '60%', data:[10, 52, 200, 334, 390, 330, 220] } ] }; myChart.setOption(option) </script> </body> </html>
运行结果
2、折线图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div></div> <script src="https://www.jb51.net/js/echarts.js"></script> <script> var myChart13 = echarts.init(document.getElementById('pic4')); var data = []; option15 = { title: { text: '曲线', }, tooltip: { trigger: 'axis', }, legend: { data:['昨日(11月8日)','今日(11月9日)'] }, grid: { left: '1%', right: '1%', bottom: '3%', containLabel: true }, toolbox: { show: false, feature: { dataZoom: { yAxisIndex: 'none' }, dataView: {readOnly: false}, magicType: {type: ['line', 'bar']}, restore: {}, saveAsImage: {} } }, color:["red","#CD3333"], xAxis: { type: 'category', boundaryGap: false, data : ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24'] }, yAxis: { type: 'value', name: '单位（kW）', axisLabel: { formatter: '{value}' } }, series: [ { name:'昨日(11月8日)', type:'line', data:[110,106,110,110,318,119,205,256,156,309,256,306,206,356,456,486,565.45,234,156,206,126,256,150,276], }, { type:'line', name : '今日(11月9日)', data:[210,136,120,120,118,219,195,176,156,329,356,346,406.54,256,156], } ] }; myChart13.setOption(option15); </script> </body> </html>
运行结果
3、饼图
由于代码重复就不浪费地方写所有代码，直接替换（一）中的option{}就可以
option = { title : { text: '某站点用户访问来源', subtext: '纯属虚构', x:'center' }, tooltip : { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, legend: { orient: 'vertical', left: 'left', data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'] }, series : [ { name: '访问来源', type: 'pie', radius : '55%', center: ['50%', '60%'], data:[ {value:335, name:'直接访问'}, {value:310, name:'邮件营销'}, {value:234, name:'联盟广告'}, {value:135, name:'视频广告'}, {value:1548, name:'搜索引擎'} ], itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] };
运行结果
4、全国地图
由于地图比较复杂，所以把全部代码展示出来
china.js可以到官网下载所有代码，在echarts/map文件夹中可以找到china.js,