1.柱状图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="lib/echarts.min.js"></script> </head> <body> <div style=" 600px;height: 400px;"></div> <script> //1. ECharts最基本的代码结构 //2. x轴数据:['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强'] //3. y轴数据:[88, 92, 63, 77, 94, 80, 72, 86] //4. 将type的值设置为bar var myCharts = echarts.init(document.querySelector('div')) var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强'] var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86] var option = { xAxis: { type: 'category', data: xDataArr }, yAxis: { type: 'value' }, series: [ { name: '语文', type: 'bar', data: yDataArr } ] } myCharts.setOption(option) </script> </body> </html>
2.折线图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="lib/echarts.min.js"></script> </head> <body> <div style=" 600px;height: 400px;"></div> <script> //1. ECharts最基本的代码结构 //2. x轴数据:['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'] //3. y轴数据:[3000, 2800, 900, 1000, 800, 700, 1400, 1300, 900, 1000, 800, 600] //4. 将type的值设置为line var myCharts = echarts.init(document.querySelector('div')) var xDataArr = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'] var yDataArr = [3000, 2800, 900, 1000, 800, 700, 1400, 1300, 900, 1000, 800, 600] var option = { xAxis: { type: 'category', data: xDataArr }, yAxis: { type: 'value' }, series: [ { name: '康师傅', data: yDataArr, type: 'line' } ] } myCharts.setOption(option) </script> </body> </html>
3.散点图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="lib/echarts.min.js"></script> </head> <body> <div style=" 600px;height: 400px;"></div> <script> //1. ECharts最基本的代码结构 //2. x轴和y轴数据 二维数组 [ [身高,体重],... ] //3. 将type的值设置为scatter, x轴和y轴的type都是value var myCharts = echarts.init(document.querySelector('div')) var data = [{ "gender": "female", "height": 161.2, "weight": 51.6 }] var axisData = [] for (var i = 0; i < data.length; i++) { var height = data[i].height; var weight = data[i].weight; var newArr = [height, weight] axisData.push(newArr) } // console.log(axisData) var option = { xAxis: { type: 'value', scale: true }, yAxis: { type: 'value', scale: true }, series: [ { type: 'scatter', data: axisData } ] } myCharts.setOption(option) </script> </body> </html>
4.饼图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="lib/echarts.min.js"></script> </head> <body> <div style=" 600px;height: 400px;"></div> <script> //1. ECharts最基本的代码结构 //2. 准备数据[{name:???, value:??? },{}] // 淘宝: 11231 京东: 22673 唯品会: 6123 1号店: 8989 聚美优品: 6700 //3. 将type的值设置为pie var myCharts = echarts.init(document.querySelector("div")) // pieData就是需要设置给饼图的数据, 数组,数组中包含一个又一个的对象, 每一个对象中, 需要有name和value var pieData = [ { name: '淘宝', value: 11231 }, { name: '京东', value: 22673 }, { name: '唯品会', value: 6123 }, { name: '1号店', value: 8989 }, { name: '聚美优品', value: 6700 }, ] var option = { series: [ { type: 'pie', data: pieData } ] } myCharts.setOption(option) </script> </body> </html>
5.地图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="lib/echarts.min.js"></script> <script src="lib/jquery.min.js"></script> </head> <body> <div style=" 600px;height: 500px;"></div> <script> //1. ECharts最基本的代码结构 //2. 准备中国地图的矢量数据 //3. 使用Ajax获取矢量地图数据 //4. 在Ajax的回调函数中注册地图矢量数据 echarts.registerMap('chinaMap', 矢量地图数据) //5. 配置geo的type为'map', map为'chinaMap' var myCharts = echarts.init(document.querySelector('div')) $.get('json/map/china.json', function (ret) { //ret 就是中国的各个省份的矢量地图数据 echarts.registerMap('chinaMap', ret) var option = { geo: { type: 'map', map: 'chinaMap' // chinaMap需要和registerMap中的第一个参数保持一致 } } myCharts.setOption(option) }) </script> </body> </html>
6.雷达图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="lib/echarts.min.js"></script> </head> <body> <div style=" 600px;height: 500px;"></div> <script> //1. ECharts最基本的代码结构 //2. 定义各个维度的最大值, 通过radar属性配置 // 易用性,功能,拍照,跑分,续航, 每个维度的最大值都是100 //3. 准备产品数据, 设置给series下的data // 华为手机1: 80, 90, 80, 82, 90 // 中兴手机1: 70, 82, 75, 70, 78 //4. 将type的值设置为radar var myCharts = echarts.init(document.querySelector('div')) // 各个维度的最大值 var dataMax = [ { name: '易用性', max: 100 }, { name: '功能', max: 100 }, { name: '拍照', max: 100 }, { name: '跑分', max: 100 }, { name: '续航', max: 100 } ] var option = { radar: { indicator: dataMax // 配置各个维度的最大值 }, series: [ { type: 'radar', // radar 此图表时一个雷达图 data: [ { name: '华为手机1', value: [80, 90, 80, 82, 90] }, { name: '中兴手机1', value: [70, 82, 75, 70, 78] } ] } ] } myCharts.setOption(option) </script> </body> </html>
7.仪表盘
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="lib/echarts.min.js"></script> </head> <body> <div style=" 600px;height: 400px;"></div> <script> //1. ECharts最基本的代码结构 //2. 准备数据, 设置给series下的data //3. 将type的值设置为gauge var myCharts = echarts.init(document.querySelector('div')) var option = { series: [ { type: 'gauge', data: [ { value: 97 } // 每一个对象就代表一个指针 ] } ] } myCharts.setOption(option) </script> </body> </html>