我的Echarts学习笔记(Update)
2024-05-10 11:10:57
第一章
下载echarts
1.源文件代码：https://www.jsdelivr.com/package/npm/echarts
里面4.8版本的dist文件夹下面的文件
2.地图数据网站：http://datav.aliyun.com/portal/school/atlas/area_selector
0.canvas
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title></head><body><canvas id="one" width="600" height="400" style="border: 1px solid red;"></canvas><script type="text/javascript">// 里面画的东西都是像素点,没有三角形的dom元素// canvas标签任何操作使用js,js就是笔,canvas就是画布let canvas=document.querySelector("#one")// 获得画布的笔let ctx=canvas.getContext('2d')console.log(ctx);// (1).绘制三角形// 起点// ctx.moveTo(100,100)// // 其他点,有多个// ctx.lineTo(100,200)// ctx.lineTo(200,200)// // 填冲颜色// ctx.fillStyle="red"// ctx.fill()// // 边线的颜色// ctx.strokeStyle="darkgoldenrod"// // 边线的宽度// ctx.lineWidth=5// ctx.closePath()// ctx.stroke()// (2)长方形,// ctx.fillStyle="aqua"// ctx.fillRect(100,200,100,200)ctx.beginPath()// x,y,半径,开始弧度,结束弧度,是否逆时针绘制ctx.arc(100,100,50,0,2*Math.PI,false)ctx.fillStyle="aqua"ctx.fill()ctx.stroke()// 设置字体大小ctx.font="20px 微软雅黑"// 字体颜色ctx.fillStyle="red"// 清除画布部分/全部区域ctx.clearRect(0,0,100,100)ctx.fillText("数据可视化",50,20)</script></body>
</html>
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title></head><body><canvas id="one" width="800" height="420" style="border: 1px solid red;"></canvas><script type="text/javascript">// 里面画的东西都是像素点,没有三角形的dom元素// canvas标签任何操作使用js,js就是笔,canvas就是画布let canvas=document.querySelector("#one")// 获得画布的笔let ctx=canvas.getContext('2d')console.log(ctx);ctx.font="16px 微软雅黑"ctx.fillText("数据可视化",50,60)ctx.moveTo(100,70)ctx.lineTo(100,400)ctx.lineTo(700,400)ctx.stroke()ctx.moveTo(100,100)ctx.lineTo(700,100)ctx.moveTo(250,400)ctx.lineTo(250,410)// ctx.moveTo(400,400)ctx.lineTo(400,410)ctx.fillText("食品",170,415)ctx.fillText("数码",310,415)ctx.fillText("服饰",450,415)ctx.moveTo(100,200)ctx.lineTo(700,200)ctx.stroke()ctx.fillText('50',60,310)ctx.moveTo(100,300)ctx.lineTo(700,300)ctx.stroke()ctx.moveTo(100,400)ctx.lineTo(700,400)ctx.stroke()ctx.fillStyle="red"ctx.fillRect(130,200,100,200)ctx.fillStyle="blue"ctx.fillRect(280,200,100,200)ctx.fillStyle="aqua"ctx.fillRect(420,120,100,280)</script></body>
</html>
0.svg
<body><svg class="box"><line x1="100" y1="100" x2="200" y2="200" stroke="red"></line><line x1="200" y1="100" x2="100" y2="200" stroke="red"></line><!-- 绘制折线 --><polyline points="300 300,50,100,120,400" fill-opacity="0.5" stroke="cyan"></polyline><!-- 绘制矩形 --><rect x="400" y="400" width="150" height="50" fill="pink"></rect><!-- 绘制圆形 --><circle cx="70" cy="95" r='50' style="stroke: aqua;fill: none;"></circle><ellipse cx="400" cy="400" rx="70" ry="50" style="fill: #FF0000;"></ellipse><polygon points="220,100 300,210 170,250 123,234"style="fill:#cccccc;stroke:#000000;stroke-width:1"/></svg>
1. 仪表盘
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>ECharts</title><!-- 引入刚刚下载的 ECharts 文件 --><script src="echarts.js"></script>
</head><body><!-- 为 ECharts 准备一个定义了宽高的 DOM --><div id="main" style="width: 100%;height:600px;"></div><script type="text/javascript">// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));option = {title: {text: "多仪表盘",x: "center",y: 100,show: true,offsetCenter: [50, "20%"],textStyle: {fontFamily: "黑体",color: "blue",fontSize: 20}},backgroundColor: "rgba(128,128,128,0.1)",// 配置提示框组件tooltip: {formatter: "{a}<br/>{c}:{b}"},series: [// 1.速度{name: "速度1",type: "gauge",z: 3,min: 0,max: 220,// 大分隔数splitNumber: 22,// 半径大小radius: "50%",axisLine: {show: true,lineStyle: {width: 10}},axisTick: {length: 20,splitNumber: 5,lineStyle: {color: "auto",}},// 分隔线就是比较大的分隔线splitLine: {length: 20,lineStyle: { color: "auto" }},// 就是车速(km/h)title: {textStyle: {fontWidth: "bolder",fontSize: 20,fontStyle: 'italic'}},detail: {textStyle: {fontWeight: "bolder"}},data: [{ value: 40, name: "车速(km/h)" }]},// 第二个盘{type: "gauge",name: "转速",max: 7,min: 0,center: ["20%", "55%"],radius: "35%",startAngle: 235,endAngle: 45,splitNumber: 7,axisLine: {lineStyle: {width: 8}},axisTick: {length: 12,splitNumber: 5,lineStyle: {color: "auto"}},splitLine: {length: 20,lineStyle: {color: "auto"}},pointer: {width: 5},title: {offsetCenter: [0, "-30%"]},detail: {textStyle: {fontWeight: "bolder"}},// value: +(Math.random() * 100).toFixed(2)data: [{ value: +(Math.random() * 100).toFixed(2), name: "转速(1000 r/min)" }]},// 第三{type: 'gauge',name: "油表",startAngle: "135",endAngle: "45",// splitNumber:10,max: 2,min: 0,center: ["77%", "50%"],radius: "25%",axisLine: {lineStyle: {width: 8,color: [[0.3, '#67e0e3'],[0.7, '#37a2da'],[1, '#fd666d']]}},splitNumber: 2,axisTick: {splitNumber: 5,length: 10,lineStyle: {color: 'auto',}},axisLabel: {formatter(v) {switch (v + "") {case '0': return "E";case "1": return "油表";case "2": return "F";}}},title: {show: false},splitLine: {distance: -30,length: 10,lineStyle: {color: '#fff',width: 1}},detail: {show: false},data: [{value: 0.5, name: "gas"}]},{type: 'gauge',name: "水表",startAngle: "315",endAngle: "225",max: 2,min: 0,center: ["77%", "60%"],radius: "25%",axisLine: {lineStyle: {width: 8,color: [[0.3, '#67e0e3'],[0.7, '#37a2da'],[1, '#fd666d']]}},splitNumber: 2,axisTick: {splitNumber: 5,length: 10,lineStyle: {color: 'auto',}},axisLabel: {formatter(v) {switch (v + "") {case '0': return "H";case "1": return "水表";case "2": return "C";}}},title: {show: false},splitLine: {distance: -30,length: 10,lineStyle: {color: '#fff',width: 1}},detail: {show: false},data: [{value: 0.5, name: "gas"}]},]};myChart.setOption(option);setInterval(function () {option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;option.series[1].data[0].value = (Math.random() * 7).toFixed(2) - 0;option.series[2].data[0].value = (Math.random() * 2).toFixed(2) - 0;option.series[3].data[0].value = (Math.random() * 2).toFixed(2) - 0;myChart.setOption(option,true);}, 2000);// 指定图表的配置项和数据// 使用刚指定的配置项和数据显示图表。</script>
</body></html>
2. 柱状图1
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>ECharts</title><!-- 引入刚刚下载的 ECharts 文件 --><script src="echarts.js"></script>
</head><body><!-- 为 ECharts 准备一个定义了宽高的 DOM --><div id="main" style="width: 800px;height:400px;"></div><script type="text/javascript">// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));option = {title:{text:"标题",subtext:"这里是副标题"},tooltip:{// formData:"{a}{c}{b}"},legend:{data:["销量"]},xAxis: {// category是根据data进行分类的type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {// value就不需要data进行分类,而是自己生成数字type: 'value'},series: [{ // 与legend有关,内容要一致name:"销量",showBackground: true,data: [120, 200, 150, 80, 70, 110, 130],type: 'bar'},{ // 与legend有关,内容要一致name:"销量",// 这个背景是放在series的指定项里面的showBackground: true,data: [120, 200, 150, 80, 70, 110, 130],type: 'bar'}]};// 指定图表的配置项和数据// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);</script>
</body></html>
3.柱状图2
<!DOCTYPE html>
<html><head><meta charset="utf-8"><!--引入ECharts脚本--><script src="echarts.js"></script>
</head><body><!---为ECharts准备一个具备大小（宽高）的DOM--><div id="main" style="width: 600px; height: 400px"></div><script type="text/javascript">//基于准备好的DOM，初始化ECharts图表var myChart = echarts.init(document.getElementById("main"));//指定图表的配置项和数据var option = {backgroundColor: '#2c343c',title: { //配置标题组件，包含主标题和副标题text: '这是主标题',textStyle: { //设置主标题样式color: '#fff'},subtext: '这是副标题', //设置副标题样式subtextStyle: {color: '#bbb'},padding: [10, 0, 100, 100] //设置标题位置，用padding属性来定位},legend: { //配置图例组件type: 'plain', //设置图例类型，默认为'plain'，当图例很多时可使用'scroll'top: '1%', //设置图例相对容器位置，top\bottom\left\rightselected: {'销量': true, //设置图例是否显示，默认为true},textStyle: { //设置图例内容样式color: '#fff', //设置所有图例的字体颜色//backgroundColor: 'black', //设置所有图例的字体背景色},tooltip: { //设置图例提示框,默认不显示show: true,color: 'red',},data: [ //设置图例内容{name: '销量',icon: 'circle', //设置图例的外框样式textStyle: {color: '#fff', //单独设置某一个图例的颜色//backgroundColor: 'black', //单独设置某一个图例的字体背景色}}],},tooltip: { //配置提示框组件show: true, //设置是否显示提示框，默认为truetrigger: 'item', //设置数据项图形触发axisPointer: { //设置指示样式type: 'shadow',axis: 'auto',},padding: 5,textStyle: { //设置提示框内容样式color: "#fff",},},grid: { //配置grid区域show: false, //设置是否显示直角坐标系网格top: 80, //设置相对位置，top\bottom\left\rightcontainLabel: false, //设置grid区域是否包含坐标轴的刻度标签tooltip: { //鼠标焦点放在图形上，产生的提示框show: true,trigger: 'item', //设置触发类型textStyle: {color: '#fff666', //设置提示框文字的颜色}}},xAxis: { //配置x轴坐标系show: true, //设置x轴坐标系是否显示position: 'bottom', //设置x轴位置offset: 0, //设置x轴相对于默认位置的偏移type: 'category', //设置轴类型，默认'category'name: '月份', //设置轴名称nameLocation: 'end', //设置轴名称相对位置nameTextStyle: { //设置坐标轴名称样式color: "#fff",padding: [5, 0, 0, -5],}, //设置坐标轴名称相对位置nameGap: 15, //设置坐标轴名称与轴线之间的距离//nameRotate:270, //设置坐标轴名字旋转axisLine: { //设置坐标轴轴线show: true, //设置坐标轴轴线是否显示symbol: ['none', 'arrow'], //设置是否显示轴线箭头symbolSize: [8, 8], //设置箭头大小symbolOffset: [0, 7], //设置箭头位置lineStyle: { //设置线color: '#fff', //设置坐标轴轴线的颜色width: 1, //设置坐标轴轴线的线宽type: 'solid', //设置坐标轴轴线的线型},},axisTick: { //设置坐标轴刻度show: true, //设置坐标轴刻度是否显示inside: true, //设置坐标轴刻度是否朝内lengt: 3, //设置长度lineStyle: {color: 'yellow', //设置坐标轴刻度的颜色，默认取轴线的颜色width: 1, //设置坐标轴刻度的线宽type: 'solid', //设置坐标轴刻度的线型},},axisLabel: { //设置坐标轴标签show: true, //设置坐标轴标签是否显示inside: false, //设置坐标轴标签是否朝内rotate: 0, //设置旋转角度margin: 5,}, //设置刻度标签与轴线之间的距离//color:'red', }, //设置默认取轴线的颜色splitLine: { //设置grid区域中的分隔线show: false, //设置grid区域中的分隔线是否显示lineStyle: {color: 'red',//width:1,//type:'solid',},},splitArea: { //设置网格区域show: false,}, //设置网格区域是否显示，默认falsedata: ["1月", "2月", "3月", "4月", "5月", "6月", "7月","8月", "9月", "10月", "11月", "12月"]},yAxis: { //配置y轴坐标系show: true, //设置网格区域是否显示position: 'left', //设置y轴位置offset: 0, //文字设置y轴相对于默认位置的偏移type: 'value', //设置轴类型，默认'category'name: '销量', //设置轴名称nameLocation: 'end', //设置轴名称相对位置valuenameTextStyle: { //设置坐标轴名称样式color: "#fff",padding: [5, 0, 0, 5],}, //设置坐标轴名称相对位置nameGap: 15, //设置坐标轴名称与轴线之间的距离nameRotate: 0, //设置坐标轴名字旋转axisLine: { //设置坐标轴轴线show: true, //设置坐标轴轴线是否显示//-------------------箭头-------------------------symbol: ['none', 'arrow'], //设置是否显示轴线箭头symbolSize: [8, 8], //设置箭头大小symbolOffset: [0, 7], //设置箭头位置lineStyle: { //设置线color: '#fff',width: 1,type: 'solid',},},axisTick: { //设置坐标轴刻度show: true, //设置坐标轴刻度是否显示inside: true, //设置坐标轴刻度是否朝内length: 3, //设置长度lineStyle: {//color:'red', //设置默认取轴线的颜色width: 1,type: 'solid',},},axisLabel: { //设置坐标轴标签show: true, //设置坐标轴标签是否显示inside: false, //设置坐标轴标签是否朝内rotate: 0, //设置旋转角度margin: 8, //设置刻度标签与轴线之间的距离//color:'red', //设置默认取轴线的颜色},splitLine: { //设置grid区域中的分隔线show: true, //设置grid区域中的分隔线是否显示lineStyle: {color: '#666',width: 1,type: 'dashed', //设置类型},},splitArea: { //设置格区域show: false, //设置格区域是否显示，默认false},},series: [{ //配置系列列表，每个系列通过type控制该系列图表类型name: '销量', //设置系列名称type: 'bar', //设置类型legendHoverLink: true, //设置系列是否启用图例hover时的联动高亮label: { //设置图形上的文本标签show: false,position: 'insideTop', //设置相对位置rotate: 0, //设置旋转角度color: '#eee',},itemStyle: { //设置图形的形状color: 'blue', //设置柱形的颜色barBorderRadius: [18, 18, 0, 0],},barWidth: '20', //设置柱形的宽度barCategoryGap: '30%', //设置柱形的间距data: [3020, 4800, 3600, 6050, 4320, 6200, 5050, 7200, 4521, 6700, 8000, 5020]}]};//使用刚指定的配置项和数据显示图表myChart.setOption(option); </script>
</body></html>
- 我们可以发现x轴或者是y轴都是有 axisLine axisLabel splitLine等等这些属性的
- 坐标轴的名字有以下这些属性:
name: ‘销量’, //设置轴名称
nameLocation: ‘end’, //设置轴名称相对位置value
nameTextStyle: { //设置坐标轴名称样式
color: “#fff”,
padding: [5, 0, 0, 5],
}, //设置坐标轴名称相对位置
nameGap: 15, //设置坐标轴名称与轴线之间的距离
nameRotate: 0,
4.柱状图3
<!DOCTYPE html>
<html><head><meta charset="utf-8"><!--引入ECharts脚本--><script src="echarts.js"></script>
</head><body><!---为ECharts准备一个具备大小（宽高）的DOM--><div id="main" style="width: 600px; height: 400px"></div><script type="text/javascript">//基于准备好的DOM，初始化ECharts图表var myChart = echarts.init(document.getElementById("main"));//指定图表的配置项和数据var option = {tooltip: {// 提示框是一个还是整个x轴的数据,靠近x轴的时候就会触发还是靠近点才会触发trigger: 'axis',// 这个是标杆axisPointer: { //设置坐标轴指示器，坐标轴触发有效type: 'shadow' //设置坐标轴默认为直线，可选为:'line'|'shadow'}},
// tooltip由axisPointer和trigger组成legend: {data: ['直接访问', '邮件营销', '联盟广告', '视频广告','搜索引擎', '百度', '谷歌', '必应', '其他']},toolbox: {show: true,// 朝向方向orient: 'vertical',x: 'right',y: 'center',feature: {mark: { show: true },dataView: { show: true, readOnly: false },magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },restore: { show: true },saveAsImage: { show: true }}},calculable: true,xAxis: [{type: "category",data: ["周一", "周二", "周三", "周四", "周五", '周六', '周日']}],yAxis: [{type: 'value'}],series: [{name: '直接访问',type: 'bar',data: [320, 332, 301, 334, 390, 330, 320]},{name: '邮件营销',type: 'bar',// stack就是一个分类,stack: '广告', //设置堆积效果data: [120, 132, 101, 134, 90, 230, 210]},{name: '联盟广告',type: 'bar',stack: '广告', //设置堆积效果data: [220, 182, 191, 234, 290, 330, 310]},{name: '视频广告',type: 'bar',stack: '广告', //设置堆积效果data: [150, 232, 201, 154, 190, 330, 410]},{name: '搜索引擎',type: 'bar',data: [862, 1018, 964, 1026, 1679, 1600, 1570],// startmarkLine: {data: [// {// name: '平均线',// // 支持 'average', 'min', 'max'// type: 'average'// },// {// name: 'Y 轴值为 100 的水平线',// yAxis: 100// },[{// 起点和终点的项会共用一个 namename: '最小值到最大值',type: 'min'},{type: 'max'}],[{name: '两个坐标之间的标线',coord: [10, 20]},{coord: [20, 30]}],// [{// // 固定起点的 x 像素位置，用于模拟一条指向最大值的水平线// yAxis: 'max',// x: '90%'// }, {// type: 'max'// }],// [// {// name: '两个屏幕坐标之间的标线',// x: 100,// y: 100// },// {// x: 500,// y: 200// }// ]]}// markLine: {// // itemStyle: {// // normal: {// // lineStyle: {// // type: 'line'// // }// // }// // },// data: [// [{ type: 'min' }, { type: 'max' }]// ]// }// end},{name: '百度',type: 'bar',barWidth: 5,stack: '搜索引擎', //设置堆积效果data: [620, 732, 701, 734, 1090, 1130, 1120]},{name: '谷歌',type: 'bar',stack: '搜索引擎', //设置堆积效果data: [120, 132, 101, 134, 290, 230, 220]},{name: '必应',type: 'bar',stack: '搜索引擎', //设置堆积效果data: [60, 72, 71, 74, 190, 130, 110]},{name: '其他',type: 'bar',stack: '搜索引擎', //设置堆积效果data: [62, 82, 91, 84, 109, 110, 120]}]};//使用刚指定的配置项和数据显示图表myChart.setOption(option); </script>
</body></html>
心得:
- stack是堆的意思,就是把数据堆在一起
feature: {mark: { show: true },dataView: { show: true, readOnly: false },magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },restore: { show: true },saveAsImage: { show: true }}
这是一个toolbox模板
5.x,y轴互换
<!DOCTYPE html>
<html><head><meta charset="utf-8"><!--引入ECharts脚本--><script src="echarts.js"></script>
</head><body><!---为ECharts准备一个具备大小（宽高）的DOM--><div id="main" style="width: 800px; height: 400px"></div><script type="text/javascript">//基于准备好的DOM，初始化ECharts图表var myChart = echarts.init(document.getElementById("main"));//指定图表的配置项和数据var option = {title: {text: '世界人口总量',subtext: '数据来自网络',},tooltip: {trigger: 'axis',axisPointer: { //设置坐标轴指示器，坐标轴触发有效type: 'shadow' //设置坐标轴默认为直线，可选为:'line'|'shadow'}},legend: {data: ['2011年', '2012年'],},toolbox: {show: true,feature: {mark: { show: true },dataView: { show: true, readOnly: false },magicType: { show: true, type: ['line', 'bar'] },restore: { show: true },saveAsImage: { show: true },},},calculable: true,xAxis: [{type: 'value', //设置柱状图// 这个是数的中间是0,右边的数字是扩大原本的多少倍boundaryGap: [0, 0],},],yAxis: [{type: 'category',data: ['A国', 'B国', 'C国', 'D国', 'E国', '世界人口(万)'],},],series: [{name: '2011年',type: 'bar',data: [18203, 23489, 29034, 104970, 131744, 630230],},{name: '2012年',type: 'bar',data: [19325, 23438, 31000, 121594, 134141, 681807],},],};//使用刚指定的配置项和数据显示图表myChart.setOption(option);</script>
</body>
</html>
6.一个月花费分配消费的堆柱状图
<!DOCTYPE html>
<html><head><meta charset="utf-8"><!--引入ECharts脚本--><script src="echarts.js"></script>
</head><body><!---为ECharts准备一个具备大小（宽高）的DOM--><div id="main" style="width: 600px; height: 400px"></div><script type="text/javascript">//基于准备好的DOM，初始化ECharts图表var myChart = echarts.init(document.getElementById("main"));//指定图表的配置项和数据var option = {title: {text: '深圳月最低生活费组成（单位:元）',subtext: '数据来自ExcelHome',},tooltip: {trigger: 'axis',axisPointer: { //设置坐标轴指示器，坐标轴触发有效type: 'shadow' //默认为直线，可选为：'line' | 'shadow'},formatter: function (params) {// 就是第一个显示信息的相关信息,就是红色的那个的所有信息console.log(params);var tar = params[0];return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value;}},toolbox: {show: true,feature: {mark: { show: true },dataView: { show: true, readOnly: false },restore: { show: true },saveAsImage: { show: true }}},xAxis: [{type: 'category',splitLine: { show: false },data: ['总费用', '房租', '水电费', '交通费', '伙食费', '日用品费用']}],yAxis: [{type: 'value'}],series: [{name: '辅助',type: 'bar',stack: '总量',// series对象里面有itemStyle(该项的设置):normal,emphasisitemStyle: {normal: { //设置正常情况下柱子的样式//barBorderColor: 'rgba(0,0,0,0)', //设置柱子边框的颜色barBorderColor: 'rgba(20,20,0,0.5)',barBorderWidth: 5, //设置柱子边框的宽度//color: 'rgba(0,0,0,0)' //设置柱子的颜色color: 'rgba(0,220,0,0.8)'},emphasis: { //设置鼠标滑过时柱子的样式barBorderColor: 'rgba(0,0,0,0)', //设置鼠标滑动到柱子边框的颜色barBorderWidth: 25, //设置鼠标滑动到柱子边框的宽度color: 'rgba(0,0,0,0)' //设置鼠标滑动到柱子的颜色}},data: [0, 1700, 1400, 1200, 300, 0]},{name: '生活费',type: 'bar', //设置柱状图stack: '总量', //设置堆积itemStyle: { normal: { label: {// normal里面的label是显示数据的show: true, position: 'inside' } } },data: [2900, 1200, 300, 200, 900, 300]}]};//使用刚指定的配置项和数据显示图表myChart.setOption(option); </script>
</body>
</html>
- series对象里面有itemStyle(图片中该项的设置):normal,emphasis(鼠标经过的时候)
- 提示框里面的信息可以重写的,使用formatter进行重写,params就是series里面的全部对象,一般都是使用params[0],params[1]
7.线图1
<!DOCTYPE html>
<html><head><meta charset="utf-8"><!--引入ECharts脚本--><script src="echarts.js"></script>
</head><body><!---为ECharts准备一个具备大小（宽高）的DOM--><div id="main" style="width: 600px; height: 400px"></div><script type="text/javascript">//基于准备好的DOM，初始化ECharts图表var myChart = echarts.init(document.getElementById("main"));//指定图表的配置项和数据var option = {backgroundColor: '#eee',title: { //配置标题组件text: "某都市的人流统计", //设置主标题textStyle: { //设置主标题文字样式color: 'red',},// 有百分比和center这些定位方式x: 'center'},tooltip: { //配置提示框组件// axis靠近x轴就显示,和出现多个数据trigger: 'axis'},legend: {data: ['人流量'],left: 'right'},xAxis: [ //配置X轴坐标轴{type: 'category',data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']}],yAxis: [ //配置Y轴坐标轴{type: 'value'}],series: [ //配置数据系列{name: '人流量',type: 'line', //设置指定显示为折线data: [80, 125, 160, 140, 200, 245, 155],// 表示线条是否平滑smooth: true},]};//使用刚指定的配置项和数据显示图表myChart.setOption(option); </script>
</body></html>
8.线性阶梯图
<!DOCTYPE html>
<html><head><meta charset="utf-8"><!--引入ECharts脚本--><script src="echarts.js"></script>
</head><body><!---为ECharts准备一个具备大小（宽高）的DOM--><div id="main" style="width: 600px; height: 400px"></div><script type="text/javascript">//基于准备好的DOM，初始化ECharts图表var myChart = echarts.init(document.getElementById("main"));//指定图表的配置项和数据var option = {title: { //配置标题组件text: "风景名胜区门票价格", //设置主标题textStyle: { //设置主标题文字样式color: 'green',},left: 15, //适当调整标题的lef位置top: 0 //适当调整标题的topt位置},tooltip: { //配置提示框组件trigger: 'axis'},legend: { //配置图例组件data: ['景区A', '景区B', '景区C'],left: 260, //适当调整工具框的left位置top: 3 //适当调整工具框的top位置},grid: { //配置网格组件left: '3%',right: '4%',bottom: '3%',containLabel: true},toolbox: { //配置工具箱组件feature: {// 保存图片saveAsImage: {}}},xAxis: { //配置X轴坐标系type: 'category',data: ['2013年', '2014年', '2015年', '2016年', '2017年', '2018年', '2019年']},yAxis: { //配置Y轴坐标系type: 'value'},series: [ //配置数据系列// 是否是阶梯线图。可以设置为 true 显示成阶梯线图，也支持设置成 'start', 'middle', 'end'{name: '景区A',type: 'line', //设置指定显示为折线step: 'start', //设置指定折线的显示样式data: [120, 140, 120, 160, 250, 280, 240]},{name: '景区B',type: 'line', //设置指定显示为折线step: 'middle', //设置指定折线的显示样式data: [220, 280, 300, 350, 320, 380, 350]},{name: '景区C',type: 'line', //设置指定显示为折线step: 'end', //设置指定折线的显示样式data: [400, 480, 540, 450, 580, 750, 650]}]};//使用刚指定的配置项和数据显示图表myChart.setOption(option); </script>
</body></html>
/ 1.阶梯线图。series的step可以设置为 true 显示成阶梯线图，也支持设置成 ‘start’, ‘middle’, ‘end’
2.toolbox的 saveAsImage: {}是保存图片
9.堆线形图
<!DOCTYPE html>
<html><head><meta charset="utf-8"><!--引入ECharts脚本--><script src="echarts.js"></script>
</head><body><!---为ECharts准备一个具备大小（宽高）的DOM--><div id="main" style="width: 600px; height: 400px"></div><script type="text/javascript">//基于准备好的DOM，初始化ECharts图表var myChart = echarts.init(document.getElementById("main"));//指定图表的配置项和数据var option = {title: { //配置标题组件text: "堆积折线图", //设置主标题textStyle: { //设置主标题文字样式color: 'green',},left: 20, //设置适当调整工具框的left位置top: 3 //设置适当调整工具框的top位置},tooltip: { //配置提示框组件trigger: 'axis'},legend: { //配置图例组件data: ['手机', '冰箱', '空调', '电视', '其他'],left: 160, //设置适当调整工具框的left位置top: 3 //设置适当调整工具框的top位置},toolbox: { //配置工具箱组件show: true,orient: 'vertical',feature: {mark: { show: true },dataView: { show: true, readOnly: false },magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },restore: { show: true },saveAsImage: { show: true }},top: 52, //设置适当调整工具框的top位置left: 550 //设置适当调整工具框的left位置},calculable: true,xAxis: [ //配置X轴坐标系{type: 'category',boundaryGap: false,data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']}],yAxis: [ //配置Y轴坐标系{type: 'value'}],series: [ //配置数据系列{name: '手机',type: 'line', //设置指定显示为折线stack: '总量', //smooth:true,color: 'rgb(0,0,0)',itemStyle: {normal:{//areaStyle: { type: 'default', color: 'rgb(174,221,139)' }}},data: [434, 345, 456, 222, 333, 444, 432]},{name: '冰箱',type: 'line', //设置指定显示为折线stack: '总量', //设置堆积color: 'blue',itemStyle: {normal: {//areaStyle: { type: 'default', color: 'rgb(107,194,53)' }}},data: [420, 282, 391, 344, 390, 530, 410]},{name: '空调',type: 'line', //设置指定显示为折线stack: '总量', //设置堆积color: 'red',itemStyle: {normal: {//areaStyle: { type: 'default', color: 'rgb(6,128,67)' }}},data: [350, 332, 331, 334, 390, 320, 340]},{name: '电视',type: 'line', //设置指定显示为折线stack: '总量', //设置堆积color: 'green',itemStyle: {normal: {//areaStyle: { type: 'default', color: 'grey' }}},data: [420, 222, 333, 442, 230, 430, 430]},{name: '其他',type: 'line', //设置指定显示为折线stack: '总量', //设置堆积color: '#FA8072',itemStyle: {normal: {//areaStyle: { type: 'default', color: 'rgb(38,157,128)' }}},data: [330, 442, 432, 555, 456, 666, 877]}]};//使用刚指定的配置项和数据显示图表myChart.setOption(option); </script>
</body></html>10.饼图
<!DOCTYPE html>
<html><head><meta charset="utf-8"><!--引入ECharts脚本--><script src="echarts.js"></script>
</head><body><!---为ECharts准备一个具备大小（宽高）的DOM--><div id="main" style="width: 600px; height: 400px"></div><script type="text/javascript">//基于准备好的DOM，初始化ECharts图表var myChart = echarts.init(document.getElementById("main"));//指定图表的配置项和数据var option = {title: { //配置标题组件text: '影响健康、寿命的各类因素', //设置主标题subtext: 'WHO统计调查报告', //设置次标题left: 'center' //设置主次标题都左右居中},tooltip: { //配置提示框组件// 饼图是item是单个数据trigger: 'item',// a是series的name,b是data的name,c是data的valueformatter: "{a} <br/>{b} : {c} ({d}%)"},legend: { //配置图例组件orient: 'vertical', //设置垂直排列left: 62, //设置图例左边距top: 22, //设置图例顶边距data: ['生活方式', '遗传因素', '社会因素', '医疗条件', '气候环境']},toolbox: { //配置工具箱组件show: true, //设置工具箱组件是否显示left: 444, //设置工具箱左边距top: 28, //设置工具箱顶边距feature: {mark: { show: true },dataView: { show: true, readOnly: false },magicType: {show: true,type: ['pie', 'funnel'],option: {funnel: {x: '25%',width: '50%',funnelAlign: 'left',max: 1548}}},restore: { show: true },saveAsImage: { show: true }}},calculable: true,series: [ //配置数据系列组件{name: '访问来源',type: 'pie',radius :[ '45%','75%'], //设置半径//radius: ['45%', '75%'],center: ['58%', '55%'], //设置圆心// true是顺时针,false是逆时针clockWise: true,data: [ //设置数据的具体值{ value: 60, name: '生活方式' },{ value: 15, name: '遗传因素' },{ value: 10, name: '社会因素' },{ value: 8, name: '医疗条件' },{ value: 7, name: '气候环境' }]}]};//使用刚指定的配置项和数据显示图表myChart.setOption(option); </script>
</body>
</html>
11.label与labelLine
<!DOCTYPE html>
<html><head><meta charset="utf-8"><!--引入ECharts脚本--><script src="echarts.js"></script>
</head><body><!---为ECharts准备一个具备大小（宽高）的DOM--><div id="main" style="width: 900px; height: 600px"></div><script type="text/javascript">//基于准备好的DOM，初始化ECharts图表var myChart = echarts.init(document.getElementById("main"));//指定图表的配置项和数据var option = {title: { //配置标题组件backgroundColor: 'yellow', //设置主标题的背景颜色text: '某大学三大学院的专业分布', //设置主标题的文字textStyle: { //设置主标题文字样式color: 'green', //设置主标题文字的颜色fontFamily: '黑体', //设置主标题文字的字体fontSize: 28 //设置主标题文字的大小},x: 'center' //设置主标题左右居中},tooltip: { //配置提示框组件trigger: 'item', //设置提示框的触发方式formatter: "{a} <br/>{b} : {c} ({d}%)"},legend: { //配置图例组件orient: 'vertical', //设置图例垂直方向x: 32, //设置图例的水平方向y: 74, //设置图例的垂直方向data: ['1-软件技术', '1-移动应用开发', '2-大数据技术与应用', '2-移动互联应用技术','2-云计算技术与应用', '3-投资与理财', '3-财务管理']},toolbox: { //配置工具箱组件show: true, //设置工具箱是否显示x: 555, //设置工具箱的水平位置y: 74, //设置工具箱的垂直位置feature: {mark: { show: true },dataView: { show: true, readOnly: false },magicType: {show: true,type: ['pie', 'funnel']},restore: { show: true },saveAsImage: { show: true }}},calculable: false,series: [{name: '专业名称',type: 'pie',// 是否支持切换选中,"单选,多选"selectedMode: 'series',radius: ['10%', '30%'],label: {position: 'inner'},labelLine: {show: true},data: [{ value: 1200, name: '计算机学院' },{ value: 900, name: '大数据学院' },{ value: 600, name: '财金学院', selected: true } //初始时为选中状态]},{name: '专业名称',type: 'pie',selectedMode: 'single',radius: ['40%', '55%'],data: [{ value: 800, name: '1-软件技术' },{ value: 400, name: '1-移动应用开发' },{ value: 500, name: '2-大数据技术与应用' },{ value: 200, name: '2-移动互联应用技术' },{ value: 200, name: '2-云计算技术与应用' },{ value: 400, name: '3-投资与理财' },{ value: 200, name: '3-财务管理' }]}]};//使用刚指定的配置项和数据显示图表myChart.setOption(option); </script>
</body>
</html>
1. label和labelLine,如果label开启true,才能labelLine使用,label是labelLine的一个开关,两个有关联.
12. 玫瑰图
<!DOCTYPE html>
<html><head><meta charset="utf-8"><!--引入ECharts脚本--><script src="echarts.js"></script>
</head><body><!---为ECharts准备一个具备大小（宽高）的DOM--><div id="main" style="width: 800px; height: 600px"></div><script type="text/javascript">//基于准备好的DOM，初始化ECharts图表var myChart = echarts.init(document.getElementById("main"));//指定图表的配置项和数据var option = {title: {text: '二级学院分布-南丁格尔玫瑰图',x: 'center', //设置主标题全部居中backgroundColor: '#B5A642', //设置主标题的背景颜色为黄铜色textStyle: { //设置主标题fontSize: 18, //设置主标题的字号大小fontFamily: "黑体", //设置主标题的字体color: "#9932CD" //设置主标题的颜色为深兰花色},},tooltip: { //配置提示框组件trigger: 'item', //设置提示框的触发方式formatter: "{a} <br/>{b} : {c} ({d}%)"},legend: { //配置图例组件x: 'center',y: 'bottom',data: ['计算机', '大数据', '外国语', '机器人', '建工', '机电', '艺术', '财经']},toolbox: { //配置工具箱组件show: true,x: 600, //设置工具箱的水平位置y: 18, //设置工具箱的垂直位置feature: {mark: { show: true },dataView: { show: true, readOnly: false },magicType: {show: true,type: ['pie', 'funnel']},restore: { show: true },saveAsImage: { show: true }}},calculable: true,series: [ //配置数据系列及格式组件{ //设置第1个数据系列及格式设置name: '学生人数(半径模式)',// 空心图就是先设置饼图然后就是调整半径type: 'pie', //南丁格尔玫瑰图属于饼图中的一种radius: ['10%', '50%'], //设置半径center: ['50%', 180], //设置圆心roseType: 'radius', //设置南丁格尔玫瑰图参数：半径模式width: '50%', // for funnel 漏斗图max: 40, // for funnel 漏斗图itemStyle: {normal: {label: {show:false},labelLine: {show: false}},emphasis: {label: {show: true},labelLine: {show: true}}},data: [{ value: 2000, name: '计算机' },{ value: 1500, name: '大数据' },{ value: 1200, name: '外国语' },{ value: 1100, name: '机器人' },{ value: 1000, name: '建工' },{ value: 900, name: '机电' },{ value: 800, name: '艺术' },{ value: 700, name: '财经' }]},{ //设置第2个数据系列及格式name: '学生人数(面积模式)',type: 'pie', //南丁格尔玫瑰图属于饼图中的一种radius: ['10%', '50%'], //设置半径center: ['50%', 180], //设置圆心roseType: 'area', //设置南丁格尔玫瑰图参数:面积模式x: '50%', // for funnel 漏斗图max: 40, // for funnel 漏斗图sort: 'ascending', // for funnel 漏斗图data: [{ value: 2000, name: '计算机' },{ value: 1500, name: '大数据' },{ value: 1200, name: '外国语' },{ value: 1100, name: '机器人' },{ value: 1000, name: '建工' },{ value: 900, name: '机电' },{ value: 800, name: '艺术' },{ value: 700, name: '财经' }]},{ //设置第3个数据系列及格式name: '教授人数(面积模式)',type: 'pie', //南丁格尔玫瑰图属于饼图中的一种radius: ['10%', '50%'], //设置半径center: ['50%', 420], //设置圆心roseType: 'area', //设置南丁格尔玫瑰图参数:面积模式x: '50%', // for funnel 漏斗图max: 40, // for funnel 漏斗图sort: 'ascending', // for funnel 漏斗图data: [{ value: 25, name: '计算机' },{ value: 15, name: '大数据' },{ value: 12, name: '外国语' },{ value: 10, name: '机器人' },{ value: 8, name: '建工' },{ value: 7, name: '机电' },{ value: 6, name: '艺术' },{ value: 4, name: '财经' }]}]};//使用刚指定的配置项和数据显示图表myChart.setOption(option); </script>
</body></html>玫瑰图
// 空心图就是先设置饼图然后就是调整半径
type: ‘pie’, //南丁格尔玫瑰图属于饼图中的一种
radius: [‘10%’, ‘50%’], //设置半径
itemStyle: {normal: {label: {show:false},labelLine: {show: false}},emphasis: {label: {show: true},labelLine: {show: true}}},
有平常模式还有鼠标靠近,都有不同状态
第二章
1. 线图点和线
<!DOCTYPE html>
<html><head><meta charset="utf-8"><!--引入ECharts脚本--><script src="js/echarts.js"></script>
</head><body><!---为ECharts准备一个具备大小（宽高）的DOM--><div id="main" style="width: 900px; height: 600px"></div><script type="text/javascript">//基于准备好的DOM，初始化ECharts图表var myChart = echarts.init(document.getElementById("main"));//指定图表的配置项和数据var option = {grid: { //配置网格组件show: true, //设置网格组件是否显示x: 15, y: 66, //设置网格左上角的位置width: '93%', height: '80%', //设置网格的宽度和高度x2: 100, y2: 100, //设置网格右下角的位置// 1.边框borderborderWidth: 5, //设置网格边界线的宽度// 边框颜色borderColor: 'red', //设置网格的边界颜色// 背景色backgroundColor: '#f7f7f7', //设置背景整个网格的颜色},title: { //配置标题组件text: '未来一周气温变化',},tooltip: { //配置提示框组件trigger: 'axis'},legend: { //配置图例组件data: ['最高气温', '最低气温']},toolbox: { //配置工具箱组件show: true,feature: {mark: { show: true },dataView: { show: true, readOnly: false },magicType: { show: true, type: ['line', 'bar'] },restore: { show: true }, saveAsImage: { show: true }}},calculable: true,xAxis: [ //配置x轴坐标系{show: true, smooth: true,type: 'category', boundaryGap: false,data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']}],yAxis: [ //配置y轴坐标系{show: false,type: 'value',axisLabel: { formatter: '{value} °C' }}],series: [ //配置数据系列{name: '最高气温', // 是否平滑设置smooth: true,type: 'line', data: [11, 11, 15, 13, 12, 13, 10],markPoint: {data: [{ type: 'max', name: '最大值' },{ type: 'min', name: '最小值' }]},markLine: { //设置标记线data: [{ type: 'average', name: '平均值' }]}},{name: '最低气温', smooth: true,type: 'line', data: [1, -2, 2, 5, 3, 2, 0],markPoint:{data:[{name:"周最低",value:-2,type:"min"}]},markLine:{data:[{type:'average',name:''}]}// markPoint: { //设置标记点// data: [// { name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }// ]// },// markLine: { //设置标记线// data: [// { type: 'average', name: '平均值' }// ]// }}]};//使用刚指定的配置项和数据显示图表myChart.setOption(option); </script>
</body></html>
2.线图（多个xy轴）
<!DOCTYPE html>
<html><head><meta charset="utf-8"><!--引入ECharts脚本--><script src="js/echarts.js"></script>
</head><body><!---为ECharts准备一个具备大小（宽高）的DOM--><div id="main" style="width: 900px; height: 600px"></div><script type="text/javascript">//基于准备好的DOM，初始化ECharts图表var myChart = echarts.init(document.getElementById("main"));//指定图表的配置项和数据var option = {color: ["red", 'green', 'blue', 'yellow', 'grey', '#FA8072'], //使用自己预定义的颜色tooltip: { //配置提示框组件trigger: 'axis'},legend: { //配置图例组件data: ['蒸发量', '降水量', '最低气温', '最高气温']},toolbox: { //配置工具箱组件show: true,feature: {mark: {show: true},dataView: {show: true},magicType: {show: true,type: ['line', 'bar']},restore: {show: true},saveAsImage: {show: true}}},xAxis: [ //配置x轴坐标系{ //指定第一条x轴上的类目数据及格式type: 'category',position: 'bottom',boundaryGap: true,show: true,axisLine: { //设置第一条x轴上的轴线lineStyle: {color: 'green',type: 'solid',width: 2}},axisTick: { //设置第一条x轴上的轴刻度标记show: true,length: 10,lineStyle: {color: 'red',type: 'solid',width: 2}},axisLabel: { //设置第一条x轴上的轴文本标记show: true,// 隔多少个标签显示标签，就是减少标签数量interval: 'auto',rotate: 45,// 刻度线和轴的距离margin: 18,// 修改显示的labelformatter: '{value}月',textStyle: {color: 'blue',fontFamily: 'sans-serif',fontSize: 15,fontStyle: 'italic',fontWeight: 'bold'}},splitLine: { //设置第一条x轴上的轴分隔线show: true,lineStyle: {color: '#483d8b',type: 'dashed',width: 1}},splitArea: { //设置第一条x轴上的轴分隔区域show: true,areaStyle: {color: ['rgba(144,238,144,0.3)', 'rgba(135,200,250,0.3)']}},data: ['1', '2', '3', '4', '5',{ //设置第一条x轴上的轴标签个性化value: '6',textStyle: {color: 'red',fontSize: 30,fontStyle: 'normal',fontWeight: 'bold'}},'7', '8', '9', '10', '11', '12']},// { //设置指定第二条x轴上的类目数据type: 'category',// 两个x的坐标轴，可以设置position的位置position: "top",data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']}],yAxis: [ //配置y轴组件{ //指定第一条y轴上的数值型数据及格式type: 'value',position: 'left',boundaryGap: [0, 0.1],axisLine: { //设置第一条y轴上的轴线show: true,lineStyle: {color: 'red',type: 'dashed',width: 2}},axisTick: { //设置第一条y轴上的轴标记show: true,length: 10,lineStyle: {color: 'green',type: 'solid',width: 2}},axisLabel: { //设置第一条y轴上的标签show: true,interval: 'auto',rotate: -45,margin: 18,formatter: '{value} ml',textStyle: {color: '#1e90ff',fontFamily: 'verdana',fontSize: 10,fontStyle: 'normal',fontWeight: 'bold'}},splitLine: { //设置第一条y轴上的分隔线show: true,lineStyle: {color: '#483d8b',type: 'dotted',width: 2}},splitArea: { //设置第一条y轴上的分隔区域show: true,areaStyle: {color: ['rgba(205,92,92,0.3)', 'rgba(255,215,0,0.3)']}}},{ //指定第二条y轴上的数值型数据及格式type: 'value',splitNumber: 10,axisLabel: { //设置第二条y轴上的数轴标签formatter: function (value) {return value + ' °C'}},splitLine: { //设置第二条y轴上的分隔线show: false}}],series: [ //配置数据系列{ //第一组数据：'蒸发量'name: '蒸发量',type: 'bar',yAxisIndex: 0, //指定这一组数据使用第二条y轴（右边的）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]},{ //第二组数据：'降水量'name: '降水量',type: 'bar',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]},{ //第三组数据：'最低气温'name: '最低气温',type: 'line',smooth: true, //设置曲线为平滑yAxisIndex: 1, //指定这一组数据使用第二条y轴（右边的）data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]},{ //第四组数据：'最高气温'name: '最高气温',smooth: true, //设置曲线为平滑type: 'line',yAxisIndex: 1, //指定这一组数据使用在第二条y轴（右边的）data: [12.0, 12.2, 13.3, 14.5, 16.3, 18.2, 28.3, 33.4, 31.0, 24.5, 18.0, 16.2]}]};// x轴的东西是相似的，但是y轴数据种类是不一样的，所以设置y轴的index,//使用刚指定的配置项和数据显示图表myChart.setOption(option);</script>
</body></html>
yAxisIndex用于数据校对哪个y轴,在series之中使用
3.线图的titile
<!DOCTYPE html>
<html><head><meta charset="utf-8"><!--引入ECharts脚本--><script src="js/echarts.js"></script>
</head><body><!---为ECharts准备一个具备大小（宽高）的DOM--><div id="main" style="width: 650px; height: 600px"></div><script type="text/javascript">//基于准备好的DOM，初始化ECharts图表var myChart = echarts.init(document.getElementById("main"));//指定图表的配置项和数据mytextStyle = { //定义自己的文本格式变量color: "blue", //设置文字颜色fontStyle: "normal", //italic斜体oblique倾斜fontWeight: "normal", //设置文字粗细bold|bolder|lighter|100|200|300|400...fontFamily: "黑体", //设置字体系列fontSize: 14, //设置字体大小};//指定图表的配置项和数据option = {grid: { //配置网格组件show: true, //设置网格组件是否显示x: 15, y: 66, //设置网格左上角的位置borderColor: '#FA8072', //设置网格的边界颜色},title: { //配置标题组件show: true, //设置标题组件是否显示text: "未来一周气温变化", //设置主标题subtext: "折线图", //设置副标题target: "blank", //'self'当前窗口打开，'blank'新窗口打开subtarget: "blank", //设置副标题打开链接的窗口// 1.textAlign textBaselinetextAlign: "center", //设置文本水平对齐textBaseline: "top", //设置文本垂直对齐textStyle: mytextStyle, //设置标题样式//subtextStyle: mytextStyle, //设置副标题样式padding: 5, //设置标题内边距itemGap: 10, //设置主副标题间距//设置所属图形的Canvas分层，zlevel大的Canvas会放在zlevel小的Canvas的上面zlevel: 0,z: 2, //设置所属组件的z分层，z值小的图形会被z值大的图形覆盖left: "10%", //设置组件离容器左侧的距离，'left'，'center'，'right'，'20%'top: "10", //设置组件离容器上侧的距离，'top'，'middle'，'bottom'，'20%'right: "auto", //设置组件离容器右侧的距离，'20%'bottom: "auto", //设置组件离容器下侧的距离，'20%'backgroundColor: "yellow", //设置标题背景色borderColor: "#ccc", //设置边框颜色borderWidth: 2, //设置边框线宽shadowColor: "red", //设置阴影颜色shadowOffsetX: 0, //设置阴影水平方向上的偏移距离shadowOffsetY: 0, //设置阴影垂直方向上的偏移距离shadowBlur: 30 //设置阴影的模糊大小},// titile(// textAlign: "center", //设置文本水平对齐// textBaseline: "top", //设置文本垂直对齐// padding: 5, //设置标题内边距// itemGap: 10, //设置主副标题间距// shadowColor: "red", //设置阴影颜色// shadowOffsetX: 0, //设置阴影水平方向上的偏移距离// shadowOffsetY: 0, //设置阴影垂直方向上的偏移距离// shadowBlur: 30 //设置阴影的模糊大小// )tooltip: { //配置提示框组件trigger: 'axis'},legend: { //配置图例组件data: ['最高气温', '最低气温']},toolbox: { //配置工具箱组件show: true,feature: {mark: { show: true },dataView: { show: true, readOnly: false },magicType: { show: true, type: ['line', 'bar'] },restore: { show: true },saveAsImage: { show: true }}},calculable: true,xAxis: [ //配置x轴坐标系{show: false, type: 'category',boundaryGap: false,data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']}],yAxis: [ //配置y轴坐标系{show: false, type: 'value',axisLabel: { formatter: '{value} °C' }}],series: [ //配置数据系列{name: '最高气温',smooth: true, type: 'line',data: [11, 11, 15, 13, 12, 13, 10],markPoint: {data: [{type: "max", name: "最大值"}, {type: "min", name: "最小值"}]},markLine: {data: [{ type: 'average', name: '平均值' }]}},{name: '最低气温',smooth: true, type: 'line', data: [1, -2, 2, 5, 3, 2, 0],markPoint: { //设置标记点data: [{ name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }]},markLine: { //设置标记线data: [{ type: 'average', name: '平均值' }]}}]};//使用刚指定的配置项和数据显示图表myChart.setOption(option); </script>
</body></html>
4.一个div放多个图表(重要)
<!DOCTYPE html>
<html><head><meta charset="utf-8"><!--引入ECharts脚本--><script src="js/echarts.js"></script>
</head><body><!---为ECharts准备一个具备大小（宽高）的DOM--><div id="main" style="width: 600px; height: 600px"></div><script type="text/javascript">//基于准备好的DOM，初始化ECharts图表var myChart = echarts.init(document.getElementById("main"));//指定图表的配置项和数据var titles = ['气温变化', '空气质量指数', '金价走势', '股票A走势'];var dataAll = [ //数据[[10.0, 8.04], [8.0, 6.95], [13.0, 7.58], [9.0, 8.81], [11.0, 8.33],[14, 9.96], [6, 7.24], [4, 4.26], [12, 10.84], [7, 4.82], [5.0, 5.68]],[[10, 9.14], [8.0, 8.14], [13, 8.74], [9, 8.77], [11, 9.26], [14.0, 8.1],[6.0, 6.13], [4.0, 3.10], [12.0, 9.13], [7, 7.26], [5.0, 4.74]],[[4.0, 4.6], [5.0, 5.7], [6.0, 6.4], [7.0, 8.1], [8.0, 7.1], [9.0, 8.4],[10.0, 9.8], [11.0, 9.9], [12.0, 8.5], [13.0, 9.2], [15.0, 11.0]],[[2.0, 2.8], [3.0, 3.6], [4.0, 4.1], [5.0, 5.4], [6.0, 6.7], [7.0, 7.4],[8.0, 7.5], [9.0, 7.5], [12.0, 9.6], [15.0, 10.1], [18.0, 11.9]]];var markLineOpt = {animation: false,lineStyle: {normal: { type: 'solid' }},data: [[{coord: [0, 3], symbol: 'none' //设置起点或终点的坐标}, {coord: [20, 13], symbol: 'none'}]]}var option = {title: [ //配置标题组件{ text: titles[0], textAlign: 'center', left: '25%', top: '1%' },{ text: titles[1], left: '73%', top: '1%', textAlign: 'center' },{ text: titles[2], textAlign: 'center', left: '25%', top: '50%' },{ text: titles[3], textAlign: 'center', left: '73%', top: '50%' }],grid: [ //配置网格组件{ x: '7%', y: '7%', width: '38%', height: '38%' }, { x2: '7%', y: '7%', width: '38%', height: '38%' },{ x: '7%', y2: '7%', width: '38%', height: '38%' }, { x2: '7%', y2: '7%', width: '38%', height: '38%' }],tooltip: { //配置提示框组件formatter: 'Group {a}:({c})'},xAxis: [ //配置x轴坐标系{ gridIndex: 0, min: 0, max: 20 }, { gridIndex: 1, min: 0, max: 20 },{ gridIndex: 2, min: 0, max: 20 }, { gridIndex: 3, min: 0, max: 20 }],yAxis: [ //配置y轴坐标系{ gridIndex: 0, min: 0, max: 15 }, { gridIndex: 1, min: 0, max: 15 },{ gridIndex: 2, min: 0, max: 15 }, { gridIndex: 3, min: 0, max: 15 }],series: [ //配置数据系列{ //设置数据系列1name: 'I', type: 'scatter',xAxisIndex: 0, yAxisIndex: 0,data: dataAll[0],//markLine:markLineOpt},{ //设置数据系列2name: 'II', type: 'scatter',xAxisIndex: 1, yAxisIndex: 1,data: dataAll[1], //markLine:markLineOpt},{ //设置数据系列3name: 'III', type: 'scatter',xAxisIndex: 2, yAxisIndex: 2,data: dataAll[2], //markLine:markLineOpt},{ //设置数据系列4name: 'IV', type: 'scatter',xAxisIndex: 3, yAxisIndex: 3,data: dataAll[3], //markLine:markLineOpt}]};//使用刚指定的配置项和数据显示图表myChart.setOption(option); </script>
</body></html>心得:
1.series和x,y和grid的数据无法自动寻找,使用我们需要gridIndex ,xAxisIndex,yAxisIndex,xy坐标轴先校对grid,之后用series校对xy轴的index
2.把数据提取到外面出来!!!,这样可以在请求其他数据的时候,方便修改
5.混合图legend
<!DOCTYPE html>
<html><head><meta charset="utf-8"><!--引入ECharts脚本--><script src="js/echarts.js"></script>
</head><body><!---为ECharts准备一个具备大小（宽高）的DOM--><div id="main" style="width: 600px; height: 600px"></div><script type="text/javascript">//基于准备好的DOM，初始化ECharts图表var myChart = echarts.init(document.getElementById("main"));//指定图表的配置项和数据var option = {color: ["red", 'green', 'blue', 'grey'], //使用自己预定义的颜色legend: {orient: 'horizontal', //'vertical'x: 'right', //'center'|'left'|{number},y: 'top', //'center'|'bottom'|{number}backgroundColor: '#eee',borderColor: 'rgba(178,34,34,0.8)',borderWidth: 4,// 内边距padding: 10,// 项之间的间隔itemGap: 20, textStyle: { color: 'red' },},xAxis: { //配置x轴坐标系data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']},yAxis: [ //配置y轴坐标系{ //设置第1条y轴type: 'value',axisLabel: { formatter: '{value} ml' }},{ //设置第2条y轴type: 'value',axisLabel: { formatter: '{value} °C' },splitLine: { show: false }}],series: [ //配置数据系列{ //设置数据系列1name: '某一年的蒸发量', type: 'bar',data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6]},{ //设置数据系列2name: '某一年的降水量', smooth: true,type: 'line', yAxisIndex: 1, data: [11, 11, 15, 13, 12, 13, 10]},{ //设置数据系列3name: '某一年的最高气温', type: 'bar',data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6]},{ //设置数据系列4name: '某一年的最低气温', smooth: true,type: 'line', yAxisIndex: 1, data: [-2, 1, 2, 5, 3, 2, 0]}]};//使用刚指定的配置项和数据显示图表myChart.setOption(option); </script>
</body>
</html>
7. legend的滚轮
<!DOCTYPE html>
<html><head><meta charset="utf-8"><!--引入ECharts脚本--><script src="js/echarts.js"></script>
</head><body><!---为ECharts准备一个具备大小（宽高）的DOM--><div id="main" style="width: 600px; height: 600px"></div><script type="text/javascript">//基于准备好的DOM，初始化ECharts图表var myChart = echarts.init(document.getElementById("main"));//指定图表的配置项和数据var option = {color: ['red', 'green', 'blue', 'grey'], //使用自己预定义的颜色legend: {// 这个是一个滚动的,可以减少标签占用的空间.type: 'scroll', //设置为滚动图例，type属性默认值为'plain'（普通图例，不滚动）orient: 'horizontal', //'vertical'x: 'right', //'center'|'left'|{number},y: 'top', //'center'|'bottom'|{number}backgroundColor: '#eee',borderColor: 'rgba(178,34,34,0.8)',borderWidth: 4,padding: 10,itemGap: 20,textStyle: { color: 'red' },},xAxis: { //配置x轴坐标系data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']},yAxis: [ //配置y轴坐标系{ //设置第1条y轴坐标系type: 'value',axisLabel: { formatter: '{value} ml' }},{ //设置第2条y轴坐标系type: 'value',axisLabel: { formatter: '{value} °C' },splitLine: { show: false }}],series: [ //配置数据系列{ //设置数据系列1name: '某一年的蒸发量 ', type: 'bar',data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6]},{ //设置数据系列2 name: '某一年的降水量 ', smooth: true,type: 'line', yAxisIndex: 1, data: [11, 11, 15, 13, 12, 13, 10]},{ //设置数据系列3name: '某一年的最高气温 ', type: 'bar',data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6]},{ //设置数据系列4name: '某一年的最低气温 ', smooth: true,type: 'line', yAxisIndex: 1, data: [-2, 1, 2, 5, 3, 2, 0]}]};//使用刚指定的配置项和数据显示图表myChart.setOption(option); </script>
</body>
</html>
8.数据轴缩放
dataZoom: { //配置数据区域缩放show: true,realtime: true,start: 0, end: 80},
// 和axis,yxis轴同级
9.dataZoom实际运用
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>ECharts</title><!-- 引入刚刚下载的 ECharts 文件 --><script src="echarts.js"></script>
</head><body><!-- 为 ECharts 准备一个定义了宽高的 DOM --><div id="main" style="width: 800px;height:400px;"></div><script type="text/javascript">// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));var data1 = [];var data2 = [];var data3 = [];var random = function (max) {return (Math.random() * max).toFixed(3);// toFixed是取小数三个.};for (var i = 0; i < 500; i++) {data1.push([random(15), random(10), random(1)]);data2.push([random(10), random(10), random(1)]);data3.push([random(15), random(10), random(1)]);}// [// "3.337",// "2.951",// "0.489"// ]// 第一个x轴,第二个是y轴,第三个是大小option = {// 开启动画animation: true,legend: {data: ['scatter', 'scatter2', 'scatter3']},tooltip: {},xAxis: {type: 'value',// data是最大的min: 'dataMin',max: 'dataMax',splitLine: {show: true}},// 可以设置成特殊值 'dataMax'，此时取数据在该轴上的最大值作为最大刻度。yAxis: {type: 'value',min: 'dataMin',max: 'dataMax',splitLine: {show: true}},dataZoom: [// dataZoom里面的数据需要绑定x,y轴的index// slider是外部的滑块,inside是外部的滑块{type: 'slider',show: true,xAxisIndex: [0],// 可视化范围,其他需要拖动start: 1,end: 35},{type: 'slider',show: true,yAxisIndex: [0],// 存放在偏左的那个方位left: '93%',start: 29,end: 36},{type: 'inside',xAxisIndex: [0],start: 24,end: 35},{type: 'inside',yAxisIndex: [0],start: 0,end: 10}],series: [{name: 'scatter',// 气泡图类型type: 'scatter',color: "red",itemStyle: {normal: {// 平常为红色opacity: 0.8},// 靠近变色emphasis: { //设置鼠标滑过时柱子的样式// // barBorderColor: 'rgba(0,0,0,0)', //设置鼠标滑动到柱子边框的颜色// barBorderWidth: 25, //设置鼠标滑动到柱子边框的宽度color: 'blank' //设置鼠标滑动到柱子的颜色}},// 重新赋值自己的大小,symbolSize是自己的大小symbolSize: function (val) {return val[2] * 40;},data: data1},{name: 'scatter2',type: 'scatter',itemStyle: {normal: {opacity: 0.8}},symbolSize: function (val) {return val[2] * 40;},data: data2},{name: 'scatter3',type: 'scatter',itemStyle: {normal: {opacity: 0.8}},symbolSize: function (val) {console.log(val);return val[2] * 40;},data: data3}]};// 指定图表的配置项和数据// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);</script>
</body></html>10.映射图
<!DOCTYPE html>
<html><head><meta charset="utf-8"><!--引入ECharts脚本--><script src="echarts.js"></script>
</head><body><!---为ECharts准备一个具备大小（宽高）的DOM--><div id="main" style="width: 600px; height: 400px"></div><script type="text/javascript">//基于准备好的DOM，初始化ECharts图表var myChart = echarts.init(document.getElementById("main"));let dataBJ = [[1, 55, 9, 56, 0.46, 18, 6, '良'],[2, 25, 11, 21, 0.65, 34, 9, '优'],[3, 56, 7, 63, 0.3, 14, 5, '良'],[4, 33, 7, 29, 0.33, 16, 6, '优'],[5, 42, 24, 44, 0.76, 40, 16, '优'],[6, 82, 58, 90, 1.77, 68, 33, '良'],[7, 74, 49, 77, 1.46, 48, 27, '良'],[8, 78, 55, 80, 1.29, 59, 29, '良'],[9, 267, 216, 280, 4.8, 108, 64, '重度污染'],[10, 185, 127, 216, 2.52, 61, 27, '中度污染'],[11, 39, 19, 38, 0.57, 31, 15, '优'],[12, 41, 11, 40, 0.43, 21, 7, '优'],[13, 64, 38, 74, 1.04, 46, 22, '良'],[14, 108, 79, 120, 1.7, 75, 41, '轻度污染'],[15, 108, 63, 116, 1.48, 44, 26, '轻度污染'],[16, 33, 6, 29, 0.34, 13, 5, '优'],[17, 94, 66, 110, 1.54, 62, 31, '良'],[18, 186, 142, 192, 3.88, 93, 79, '中度污染'],[19, 57, 31, 54, 0.96, 32, 14, '良'],[20, 22, 8, 17, 0.48, 23, 10, '优'],[21, 39, 15, 36, 0.61, 29, 13, '优'],[22, 94, 69, 114, 2.08, 73, 39, '良'],[23, 99, 73, 110, 2.43, 76, 48, '良'],[24, 31, 12, 30, 0.5, 32, 16, '优'],[25, 42, 27, 43, 1, 53, 22, '优'],[26, 154, 117, 157, 3.05, 92, 58, '中度污染'],[27, 234, 185, 230, 4.09, 123, 69, '重度污染'],[28, 160, 120, 186, 2.77, 91, 50, '中度污染'],[29, 134, 96, 165, 2.76, 83, 41, '轻度污染'],[30, 52, 24, 60, 1.03, 50, 21, '良'],[31, 46, 5, 49, 0.28, 10, 6, '优']];//指定图表的配置项和数据var option = {backgroundColor: '#eee',title: { //配置标题组件text: "北京api数据", //设置主标题textStyle: { //设置主标题文字样式color: 'red',},// 有百分比和center这些定位方式x: 'center'},tooltip: { //配置提示框组件// axis靠近x轴就显示,和出现多个数据trigger: 'axis'},legend: {data: ['人流量'],left: 'right'},xAxis: [ //配置X轴坐标轴{type: 'category',data: dataBJ.map(function(item){return item[0]}),}],yAxis: [ //配置Y轴坐标轴{type: 'value'}],series: [ //配置数据系列{name: '雨量',type: 'line', //设置指定显示为折线data: dataBJ.map(function(item){return item[1]}),// 表示线条是否平滑smooth: true,// markLine: {// lineStyle: {// color: "red"// },// data: [{ yAxis: 40 }, { yAxis: 80 }, { yAxis: 120 }]// }},],// 映射组件visualMap: [{ // 第一个 visualMap 组件type: 'continuous', // 定义为连续型 visualMap// type: 'piecewise', // 定义为分段型 visualMap// 最小值min: 30,// 最大值max: 300,// 是否连续calculableL: true,// piecewise的属性进行坐标和和块进行分块pieces: [{ gt: 220, lte: 300, color: "red" }, // (900, 1500]{ gt: 100, lte: 220, color: "yellow" }, // (310, 1000]{ lt: 100, color: "green" } // (-Infinity, 5)],// 文本text: ["数据范围"],// 宽高itemWidth: 30,itemHeight: 130,// 坐标轴渐变颜色设置和点大小inRange: {color: ['green', 'yellow', 'red'],// symbolSize: [30, 100]},left: "90%",}]};//使用刚指定的配置项和数据显示图表myChart.setOption(option); </script>
</body>
</html>
<!DOCTYPE html>
<html><head><meta charset="utf-8"><!--引入ECharts脚本--><script src="echarts.js"></script>
</head><body><!---为ECharts准备一个具备大小（宽高）的DOM--><div id="main" style="width: 800px; height: 400px"></div><script type="text/javascript">//基于准备好的DOM，初始化ECharts图表var myChart = echarts.init(document.getElementById("main"));let dataBJ = [[1, 55, 9, 56, 0.46, 18, 6, '良'],[2, 25, 11, 21, 0.65, 34, 9, '优'],[3, 56, 7, 63, 0.3, 14, 5, '良'],[4, 33, 7, 29, 0.33, 16, 6, '优'],[5, 42, 24, 44, 0.76, 40, 16, '优'],[6, 82, 58, 90, 1.77, 68, 33, '良'],[7, 74, 49, 77, 1.46, 48, 27, '良'],[8, 78, 55, 80, 1.29, 59, 29, '良'],[9, 267, 216, 280, 4.8, 108, 64, '重度污染'],[10, 185, 127, 216, 2.52, 61, 27, '中度污染'],[11, 39, 19, 38, 0.57, 31, 15, '优'],[12, 41, 11, 40, 0.43, 21, 7, '优'],[13, 64, 38, 74, 1.04, 46, 22, '良'],[14, 108, 79, 120, 1.7, 75, 41, '轻度污染'],[15, 108, 63, 116, 1.48, 44, 26, '轻度污染'],[16, 33, 6, 29, 0.34, 13, 5, '优'],[17, 94, 66, 110, 1.54, 62, 31, '良'],[18, 186, 142, 192, 3.88, 93, 79, '中度污染'],[19, 57, 31, 54, 0.96, 32, 14, '良'],[20, 22, 8, 17, 0.48, 23, 10, '优'],[21, 39, 15, 36, 0.61, 29, 13, '优'],[22, 94, 69, 114, 2.08, 73, 39, '良'],[23, 99, 73, 110, 2.43, 76, 48, '良'],[24, 31, 12, 30, 0.5, 32, 16, '优'],[25, 42, 27, 43, 1, 53, 22, '优'],[26, 154, 117, 157, 3.05, 92, 58, '中度污染'],[27, 234, 185, 230, 4.09, 123, 69, '重度污染'],[28, 160, 120, 186, 2.77, 91, 50, '中度污染'],[29, 134, 96, 165, 2.76, 83, 41, '轻度污染'],[30, 52, 24, 60, 1.03, 50, 21, '良'],[31, 46, 5, 49, 0.28, 10, 6, '优']];//指定图表的配置项和数据var option = {backgroundColor: '#eee',title: { //配置标题组件text: "北京api数据", //设置主标题textStyle: { //设置主标题文字样式color: 'red',},// 有百分比和center这些定位方式x: 'center'},tooltip: { //配置提示框组件// axis靠近x轴就显示,和出现多个数据trigger: 'axis'},legend: {left: 'right'},xAxis: [ //配置X轴坐标轴{type: 'category',data: dataBJ.map(function (item) {return item[0]}),}],yAxis: [ //配置Y轴坐标轴{type: 'value'}],series: [ //配置数据系列{// name: '雨量',type: 'line', //设置指定显示为折线data: dataBJ.map(function (item) {return item[1]}),// 表示线条是否平滑smooth: true,// markLine: {// lineStyle: {// color: "red"// },// data: [{ yAxis: 40 }, { yAxis: 80 }, { yAxis: 120 }]// }},],// 映射组件visualMap: [{ // 第一个 visualMap 组件// hoverLink:true,type: 'piecewise', // 定义为分段型 visualMap// piecewise:true, // 进行分块// splitNumber:,// 最小值// min: 30,// // 最大值// max: 300,// // 是否连续// piecewise的属性进行坐标和和块进行分块// calculableL: true,// 重要属性pieces: [{ gt: 250, lte: 300, color: "#aa069f" }, // (900, 1500]{ gt: 200, lte: 250, color: "red" }, // (900, 1500]{ gt: 150, lte: 200, color: "#fc7d02" }, // (310, 1000]{ gt: 100, lte: 150, color: "yellow" }, // (310, 1000]{ lt: 100, color: "green" } // (-Infinity, 5)],// 文本// // 宽高// // 坐标轴渐变颜色设置和点大小left: "85%",top: "10%"}]};//使用刚指定的配置项和数据显示图表myChart.setOption(option); </script>
</body></html>
type: 'piecewise’的pieces
type: ‘continuous’, 需要pieces,isrange
第三章
模拟异步请求
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>ECharts</title><!-- 引入刚刚下载的 ECharts 文件 --><script src="echarts.js"></script><script src="jquery-3.3.1.js"></script>
</head><body><!-- 为 ECharts 准备一个定义了宽高的 DOM --><div id="main" style="width: 1000px;height:400px;"></div><script type="text/javascript">// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));myChart.setOption({color: ["Purple", "LimeGreen"],xAxis: {type: 'category',data: []},yAxis: {type: 'value'},tooltip: {trigger: 'axis'},lengend: {},series: [{name: "男",type: "bar",data: [],itemStyle: {normal: {label: {show: true,position: 'top'}}}},{name: "女",type: "bar",data: [],itemStyle: {normal: {label: {show: true, position: 'top'}}}},]})myChart.showLoading({text: "请您休息一下",color: "blue",textColor: "red",});$.get("ch6_5_3_data.json").done(function (data) {// console.log(data["data"][2]);var d = datavar boyList = [] //男生var girlList = []var specList = []
// console.log(specList);有时候x轴显示不完整可能是不够宽度for (var i = 0; i < d.data.length; i++) {if (d.data[i].sex == "男") {boyList.push(d.data[i].value)specList.push(d.data[i].specName)} else {girlList.push(d.data[i].value)}}myChart.setOption({xAxis: { data: specList },yAxis: {},series: [{ name: '男', type: 'bar', data: boyList },{ name: '女', type: 'bar', data: girlList }]})myChart.hideLoading()// 1. JSON文件格式就是json数据,必须要满足json的严格要求// var data1='{"name":123}'// 2. 当我们去请求json文件的时候,返回的是js对象格式// JSON.stringify(data1) // console.log(JSON.parse(data1));})// 指定图表的配置项和数据// 使用刚指定的配置项和数据显示图表。</script>
</body></html>itemStyle: {normal: {label: {show: true,position: 'top'}}}
bar的label是数据数值
2.先设定好基本框架(数据先为空),之后进行请求数据,提取数据一个series的index放的是一个同类数据
我的Echarts学习笔记(Update)相关推荐
- 数据可视化echarts学习笔记
文章目录 echarts 使用 渐变色 一些配置项 dataset与transform数据过滤 dataset transform 动态排序 时间轴更新数据 极坐标系 echarts 官网https: ...
- echarts学习笔记1
可视化面板介绍 应对现在数据可视化的趋势,越来越多企业需要在很多场景(营销数据,生产数据,用户数据)下使用,可视化图表来展示体现数据,让数据更加直观,数据特点更加突出. [外链图片转存失败,源站可 ...
- MongoDB学习笔记~Update方法更新集合属性后的怪问题
回到目录 在对MongoDB进行封装后,对于Update更新对象里的集合属性时出现了一个现象,让人感到很恶心,人家更新前是个美丽的Array,但是更新之后集合对象变成了键值对,键是集合的类型名称,值是 ...
- ECharts 学习笔记
ECharts添加点击事件(基于饼图): var option = {... } myChart.setOption(option); myChart.on('click', function eCo ...
- echarts学习笔记
主要记录option里面的相关知识 官方文档:https://echarts.apache.org/zh/option.html#title 入门示例 option = {xAxis:{// 设置x轴 ...
- 2023-01-03 Echarts学习笔记(二) 常见Option配置项介绍:xAxis,yAxis,series,grid,toolbox,legend,tooltip,title,color等
Echarts的基础配置 1.color:调色盘颜色列表 2.title:标题组件 2.1.设置图表的标题 2.2.同时主标题和副标题(了解) 3.tooltip:提示框组件 触发类型 4.legen ...
- ECharts数据可视化学习笔记和应用
ECharts数据可视化学习笔记和应用 一.概念 二.Echarts使用 使用步骤 三.Echarts-基础配置 四.柱状图图表1 五.柱状图图表2 六.折线图1 七.折线图2 八.饼状图1 九.饼形 ...
- oracle update单引号,Oracle学习笔记：update的字段中包括单引号
平时update的时候直接更改字段内的值,例如: update table_temp set name = 'Hider' where id = 100; 但更新后的值中包括单引号,则不能按以上方式进 ...
- MongoDB学习笔记(入门)
MongoDB学习笔记(入门) 一.文档的注意事项: 1. 键值对是有序的,如:{ "name" : "stephen", "genda" ...
最新文章
- 【原创】Android VMP加壳 POC
- boost跨平台 c++_跨平台C++整数类型 之一 固定宽度整数(boost和C++11)
- linux服务器用哪个面板好,Linux服务器管理面板哪家比较好用？
- $.post()提交了数据,return不给跳转
- 粒子群优化算法（Particle Swarm Optimization）的 Matlab（R2018b）代码实现
- 发一则自己创作的Lae程序员小漫画，仅供一乐
- java多个文件压缩_java实现多个文件压缩
- python如果选择不在列表里_使用python中的in ,not in来检查元素是不是在列表中的方法...
- 有软件测试台式电脑电源供电不足吗,台式机电源供电不足的原因
- LinAlgError: SVD did not converge
- WPS简历模板的图标怎么修改_HR眼里的优秀简历模板长这样！30份中英文优秀模板，可一键修改！...
- 浅谈企业生产现场消防安全管理策略分析
- 三相逆变器双pi控制器参数如何调节_干货！单相光伏并网逆变器的环路控制
- linux如何装coap协议,coap协议源码安装与测试
- 我收藏的thinkphp扩展插件
- 一文带你彻底厘清 Kubernetes 中的证书工作机制
- table在html是什么意思,html5中table指的是什么意思
- Dell Optiplex 960 n series 释放SLIC
- 1008day1作业：字符串（方法、格式化、strip左右字符）、列表（方法、max、min、去重、统计个数、两列表比较取出大值zip合成新列表）、斐波那契、水仙花数、冒泡排序列表、计算器、九九乘法
- Cadence IC设计环境搭建（ IC617+MMSIM151+Calibre2015）