ECharts Demo

  • e7_874767
    了解作者
  • 163.8KB
    文件大小
  • rar
    文件格式
  • 0
    收藏次数
  • VIP专享
    资源类型
  • 0
    下载次数
  • 2022-05-26 05:55
    上传日期
ECharts Demo,解压缩后直接看
ECharts.rar
  • demo.html
    4.5KB
  • echarts.min.js
    563.8KB
内容介绍
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <body> <!-- 为 ECharts 准备一个具备大小(宽高)的 DOM --> <div id="main" style="width: 700px;height:400px;"></div> <!-- 为 ECharts 准备一个具备大小(宽高)的 DOM --> <div id="pie" style="width: 700px;height:400px;"></div> <!-- 为 ECharts 准备一个具备大小(宽高)的 DOM --> <div id="line" style="width: 700px;height:400px;"></div> </body> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="echarts.min.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: 'ECharts 入门示例' }, toolbox: { feature: { saveAsImage: {} } }, tooltip: {}, legend: { data:['销量'] }, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); var pieChart = echarts.init(document.getElementById('pie')); pieChart.setOption({ title : { text: '某站点用户访问来源', subtext: '纯属虚构', x:'center' }, toolbox: { feature: { saveAsImage: {} } }, tooltip : { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, legend: { orient: 'vertical', left: 'left', data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'] }, series : [ { name: '访问来源', type: 'pie', radius : '55%', center: ['50%', '60%'], data:[ {value:335, name:'直接访问'}, {value:310, name:'邮件营销'}, {value:234, name:'联盟广告'}, {value:135, name:'视频广告'}, {value:1548, name:'搜索引擎'} ], itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }) var lineChart = echarts.init(document.getElementById('line')); lineChart.setOption({ title: { text: '折线图堆叠' }, tooltip: { trigger: 'axis' }, legend: { data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎'] }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, toolbox: { feature: { saveAsImage: {} } }, xAxis: { type: 'category', boundaryGap: false, data: ['周一','周二','周三','周四','周五','周六','周日'] }, yAxis: { type: 'value' }, series: [ { name:'邮件营销', type:'line', stack: '总量', data:[120, 132, 101, 134, 90, 230, 210] }, { name:'联盟广告', type:'line', stack: '总量', data:[220, 182, 191, 234, 290, 330, 310] }, { name:'视频广告', type:'line', stack: '总量', data:[150, 232, 201, 154, 190, 330, 410] }, { name:'直接访问', type:'line', stack: '总量', data:[320, 332, 301, 334, 390, 330, 320] }, { name:'搜索引擎', type:'line', stack: '总量', data:[820, 932, 901, 934, 1290, 1330, 1320] } ] }) </script> </body> </html> </body> </html>
评论
    相关推荐
    • 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图表
      echarts图表示例教程
    • echarts地图
      echarts地图实现模拟迁徙,动态地图,实现模拟迁徙,实现模拟迁徙
    • echarts
      NULL 博文链接:https://lxmhope.iteye.com/blog/2228606
    • echarts1.4.1
      echarts工具包1.4.1版本、图表控件:地图、柱形图、曲线图以及实例、适应IE8的插件
    • echarts文件
      使用vue框架时用来简化echarts的引用,使用echarts时不在需要全局引用或者局部引用时引用一大堆的东西
    • SIM800C_MQTT.rar
      使用SIM800C模块,使用MQTT协议,连接中国移动onenet平台,能实现数据的订阅、发布、存储等