-
语法： series: [ { name:'最高气温',type:'line', data:[11, 11, 15, 13, 12, 13, 10], markPoint: { data: [{type: 'max', name: '最大值',symbol:'pin',symbolSize:[60,40]},{type: 'min', name: '最小值',symbol:'pin',symbolSize:[60,40]}]}, markLine: { data: [{type: 'average', name: '平均值'}] } }, { name:'最低气温',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: '平均值'}, [{ symbol: 'none',x: '90%', yAxis: 'max'}, {symbol: 'circle', label: { normal: {position: 'start',formatter: '最大值' } }, type: 'max', name: '最高点' }] ] } } ]查看全部
-
8.markPoint设置最大/小值 markLine平均值 symbol: //circle:椭圆 rect：长方形 roundRect：菱角形 triangle：三角形 diamond：菱形 pin：气球 arrow：凹三角查看全部
-
5.series：数据 语法： series: [{name: '销量', type: 'bar',//柱形图 data: [5, 20, 36, 10, 10, 20]// },{ name: '产量', type: 'line',//折线图 data: [7, 30, 50, 11, 40, 80] }] 6. tooltip：坐标轴触发 语法： tooltip: { trigger:'axis'//坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。 }, //工具箱 7.toolbox：组件的工具箱 必须导入包：<script type="text/javascript" src="js/echarts.js"></script> toolbox组件的工具栏 Show 是否显示 Feature 具体显示的功能 saveAsImage 保存图片 Restore 还原 dateView 数据视图 dataZoom 缩放视图 magicType 动态类型转换 语法： toolbox: { show: true, feature: { dataZoom: { yAxisIndex: 'none' }, dataView: {readOnly: false}, magicType: {type: ['line', 'bar']}, restore: {}, saveAsImage: {} } },查看全部
-
三、API解析 固定格式所有图形代码写入格式：var option{} 1.title： 语法： title: { show:true, text: 'ECharts 入门示例',//标题文字 subtext:"学习Echarts",//子标题 right:50,//标题位置，数字就是像素值 borderColor:"#006666",//边框颜色 borderWidth:2,//边框宽度 textStyle:{fontSize:25},//标题文字大小 fontStyle:{default: 'oblique'}//标题文字风格 }, //标题 2.legend：图例 语法：legend{ data: ['销量', '产量'],}：表示图例样式内容自定义格式 3.xAxis：x轴 语法： xAxis: { type: 'category',（type属性固定） name: 'x', splitLine: {show: false}, data: ['一', '二', '三', '四', '五', '六', '七', '八', '九'] }, 4.yAxis：y轴 语法： yAxis: { type: 'log',（type属性固定） name: 'y' axisLabel: { formatter: '{value} °C' }//设置y轴的单位名称 },查看全部
-
第二章知识总结 Echarts解析文档 一、网址 1.官网链接:http://echarts.baidu.com/index.html 2.作者交流链接：https://github.com/ecomfe/echarts 二、Echarts API解析 1、模板 （1）引用两个链接： <script src="js/echarts.min.js"></script> <script type="text/javascript" src="js/echarts.js"></script> （2）<!-- 为ECharts准备一个具备大小（宽高）的Dom --> <div id="main" ></div> （3）script <script type="text/javascript"> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 /*--------------此处添加主要代码-----------------------*/ var option = {........} // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option);// </script>查看全部
-
所需依赖查看全部
-
小例子查看全部
-
饼图的基本查看全部
-
canvas和svg画图原理查看全部
-
ECharts的工具栏组件 toolbox组件的工具栏 Show 是否显示 Feature 具体显示的功能 saveAsImage 保存图片 Restore 还原 dateView 数据视图 dataZoom 缩放视图 magicType 动态类型转换查看全部
-
tooltip: {}, //工具箱 legend: {data:['销量']}, //图例 xAxis: {data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]}, //x轴 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>查看全部
-
案例： <!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: { show:true, text: 'ECharts 入门示例',//标题文字 subtext:"学习Echarts",//子标题 right:50,//标题位置，数字就是像素值 borderColor:"#006666",//边框颜色 borderWidth:2,//边框宽度 textStyle:{fontSize:25},//标题文字大小 fontStyle:{default: 'oblique'}//标题文字风格 },查看全部
-
标题组件 Text:标题文字 Subtext:子标题 left,top,right,bottom标题位置 borderColor:边框颜色 borderWidth:边框宽度查看全部
-
<!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>查看全部
-
示例代码介绍 html结构 Echarts.init()初始化Echarts实例 setOption用指定数据绘图 Option对象 标题：title 图例：legend X轴：xAxis Y轴：yAxis 数据：series：Name/type/data 直方图：简单修改配置实现折线图：type：'bar' 折线图：简单修改配置实现折线图：type：'line'查看全部
举报
0/150
提交
取消