echarts1.4.1

  • s4_645059
    了解作者
  • 3.2MB
    文件大小
  • zip
    文件格式
  • 0
    收藏次数
  • VIP专享
    资源类型
  • 0
    下载次数
  • 2022-04-10 12:55
    上传日期
echarts工具包1.4.1版本、图表控件:地图、柱形图、曲线图以及实例、适应IE8的插件
echarts-1.4.1.zip
内容介绍
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>ECharts</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="ECharts"> <meta name="author" content="linzhifeng@baidu.com"> <script src="../../doc/asset/js/esl/esl.js"></script> <script src="../../doc/asset/js/codemirror.js"></script> <script src="../../doc/asset/js/javascript.js"></script> <link href="../../doc/asset/css/bootstrap.css" rel="stylesheet"> <link href="../../doc/asset/css/bootstrap-responsive.css" rel="stylesheet"> <link href="../../doc/asset/css/codemirror.css" rel="stylesheet"> <link href="../../doc/asset/css/monokai.css" rel="stylesheet"> <link rel="shortcut icon" href="../../doc/asset/ico/favicon.png"> <style type="text/css"> .test-head {padding-left: 20px;margin-top:0;background-color:#eee;} .CodeMirror pre{color: #f8f8f2;} .sidebar-nav { padding: 9px 0; margin-bottom: 0; } .icon-resize-full, .icon-resize-small { float: right; opacity: .3; } .span4.ani { transition: width 1s; -moz-transition: width 1s; /* Firefox 4 */ -webkit-transition: width 1s; /* Safari and Chrome */ -o-transition: width 1s; /* Opera */ } .span8.ani { transition: width 1s; -moz-transition: width 1s; /* Firefox 4 */ -webkit-transition: width 1s; /* Safari and Chrome */ -o-transition: width 1s; /* Opera */ } .main { height: 400px; overflow: hidden; padding : 10px; margin-bottom: 10px; border: 1px solid #e3e3e3; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); } </style> </head> <body> <h3 class="test-head"><a href="../../index.html" rel='nofollow' onclick='return false;'>ECharts</a> - test all <button onclick="refreshAll()">Refresh All</button></h3> <!--------0:line---------> <div class="container-fluid" idx='0'> <div class="row-fluid"> <div md="sidebar-code" class="span4"> <div class="well sidebar-nav"> <div class="nav-header"><a href="#" onclick="autoResize()" class="icon-resize-full" md ="icon-resize" rel='nofollow' onclick='return false;'></a>option</div> <textarea md="code" name="code"> option = { tooltip : { trigger: 'axis' }, legend: { data:['邮件营销','联盟广告','直接访问','搜索引擎'] }, toolbox: { show : true, 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', boundaryGap : false, data : ['周一','周二','周三','周四','周五','周六','周日'] } ], yAxis : [ { type : 'value', splitArea : {show : true} } ], series : [ { name:'邮件营销', type:'line', stack: '总量', symbol: 'none', itemStyle: { normal: { areaStyle: { // 区域图,纵向渐变填充 color : (function(){ var zrColor = require('zrender/tool/color'); return zrColor.getLinearGradient( 0, 200, 0, 400, [[0, 'rgba(255,0,0,0.8)'],[0.8, 'rgba(255,255,255,0.1)']] ) })() } } }, data:[ 120, 132, 301, 134, {value:90, symbol:'droplet',symbolSize:5}, 230, 210 ] }, { name:'联盟广告', type:'line', stack: '总量', smooth: true, symbol: 'image://../../doc/asset/ico/favicon.png', // 系列级个性化拐点图形 symbolSize: 8, data:[ 120, 82, { value:201, symbol: 'star', // 数据级个性化拐点图形 symbolSize : 15, itemStyle : { normal: {label : { show: true, textStyle : { fontSize : '20', fontFamily : '微软雅黑', fontWeight : 'bold' } }}} }, { value:134, symbol: 'none' }, 190, { value : 230, symbol: 'emptypin', symbolSize: 8 }, 110 ] }, { name:'直接访问', type:'line', stack: '总量', symbol: 'arrow', symbolSize: 6, symbolRotate: -45, itemStyle: { normal: { color: 'red', lineStyle: { // 系列级个性化折线样式 width: 2, type: 'dashed' } }, emphasis: { color: 'blue' } }, data:[ 320, 332, '-', 334, { value: 390, symbol: 'star6', symbolSize : 20, symbolRotate : 10, itemStyle: { // 数据级个性化折线样式 normal: { color: 'yellowgreen' }, emphasis: { color: 'orange', label : { show: true, position: 'inside', textStyle : { fontSize : '20' } } } } }, 330, 320 ] }, { name:'搜索引擎', type:'line', symbol:'emptyCircle', itemStyle: { normal: { lineStyle: { // 系列级个性化折线样式,横向渐变描边 width: 2, color: (function(){ var zrColor = require('zrender/tool/color'); return zrColor.getLinearGradient( 0, 0, 1000, 0, [[0, 'rgba(255,0,0,0.8)'],[0.8, 'rgba(255,255,0,0.8)']] ) })(), shadowColor : 'rgba(0,0,0,0.5)', shadowBlur: 10, shadowOffsetX: 8, shadowOffsetY: 8 } }, emphasis : { label : {show: true} } }, data:[ 620, 732, 791, {value:734, symbol:'emptyHeart
评论
    相关推荐
    • ECharts 地图
      ECharts 地图,几种样式的地图DEMO
    • Echarts实例
      Echarts实例Echarts实例Echarts实例Echarts实例Echarts实例Echarts实例Echarts实例Echarts实例Echarts实例Echarts实例Echarts实例Echarts实例Echarts实例Echarts实例Echarts实例Echarts实例Echarts实例Echarts实例
    • echarts实例
      Echarts图表开发实例,包括折线图、饼状图、柱状图等
    • echarts图标
      本图表是echarts图标。。。。。。。。
    • ECharts Demo
      ECharts Demo,解压缩后直接看
    • echarts图表
      echarts图表示例教程
    • echarts地图
      echarts地图实现模拟迁徙,动态地图,实现模拟迁徙,实现模拟迁徙
    • echarts
      NULL 博文链接:https://lxmhope.iteye.com/blog/2228606
    • echarts文件
      使用vue框架时用来简化echarts的引用,使用echarts时不在需要全局引用或者局部引用时引用一大堆的东西
    • SIM800C_MQTT.rar
      使用SIM800C模块,使用MQTT协议,连接中国移动onenet平台,能实现数据的订阅、发布、存储等