-
echarts 笔记下载地址, github下载地址 https://github.com/shengxinjing/imooc-echarts查看全部
-
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Echarts直方图演示</title> <script src="echarts.min.js"></script> </head> <body> <div id="main" ></div> <script type="text/javascript"> var myChart=echarts.init(document.getElementById('main')); var option={ title:{text:'Echarts直方图'}, toolbox:{show:true,feature:{saveAsImage:{show:true}}}, legend:{data:['销量']}, xAxis:{data:['衬衫','羊毛衫','雪纺衫','裤子','高跟鞋','袜子']}, yAxis:{}, series:[{name:'销量', type:'bar', data:[5,20,36,10,10,20] }, { name:'产量', type:'line', data:[5,20,36,10,10,20]}] }; myChart.setOption(option); </script> </body> </html>查看全部
-
https://github.com/shengxinjing/imooc-echarts查看全部
-
代码太长,不会了查看全部
-
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>仪表图</title> <script src="js/echarts.min.js"></script> <script type="text/javascript" src="js/echarts.js"></script> </head> <body> <div id="main" ></div> <script type="text/javascript"> var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option={ toopltip:{formatter:"{a}<br/>{a}:{c}%"}, toolbox:{feature:{restore:{}, saveAsImage:{}}}, series:[{name:'业务指标', type:'gauge', detail:{formatter:'{value}%'}, data:[{value:32,name:'完成率'}]}] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); setInterval(function () {option.series[0].data[0].value=(Math.random()*100).toFixed(2)-0; myChart.setOption(option,true); }, 2000 ); </script> </body> </html>查看全部
-
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="js/echarts.min.js"></script> </head> <body> <!-- 为ECharts准备一个具备大小(宽高)的Dom --> <div id="main" ></div> <script type="text/javascript"> // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { //标题 title: {text: 'ECharts 入门示例'}, //工具箱 tooltip: {}, //图例 legend: {data:['销量']}, //x轴 xAxis: {data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]}, yAxis: {}, //数据: series: [{ name: '销量', type: 'bar',//传一个数据 data: [5, 20, 36, 10, 10, 20]// },{ name: '产量', type: 'line',//传一个数据 data: [7, 30, 50, 11, 40, 80] }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option);// </script> </body> </html>查看全部
-
浏览器画图原理:canvas基于像素,svg基于对象模型 画图 1. Canvas -- 基于像素 -- 单个html 类似于画笔在画布上画画 -- Echarts 基于 Canvas 画图 2. Svg -- 基于对象模型 -- 多个图形元素 -- 高保真 常见图形组件 标题/工具栏/图例/提示框 坐标轴(x轴,y轴)查看全部
-
可多看几遍第五章的视频,讲得很好,对于自己之前学习的echarts基本操作,还是很有效果的!加油
查看全部 -
dataZoom(大数据):查看全部
-
浏览器画图原理:canvas基于像素,svg基于对象模型查看全部
-
标题组建查看全部
-
标题组件查看全部
-
配置多个y 轴,就要设置 yAxisIndex的值查看全部
-
雷达图代码
查看全部 -
散点图代码
查看全部
举报
0/150
提交
取消