echarts 常用图表示例
2024-05-09 14:20:39
既然说到 echarts，那就不得不分享一个了不得的链接啦：Documentation - Apache ECharts （绝对不会让你感到失望的哟）。
条形图
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>第一个 ECharts 实例</title><!-- 引入 echarts.js --><script src="https://cdn.staticfile.org/echarts/4.3.0/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 实例'},tooltip: {},legend: {data:['销量']},xAxis: {data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);</script>
</body>
</html>
饼图
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>第一个 ECharts 实例</title><!-- 引入 echarts.js --><script src="https://cdn.staticfile.org/echarts/4.3.0/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'), 'dark'); // dark 可尝试修改为 lightmyChart.setOption({series : [{// 此系列自己的调色盘//color: ['#ff0000','#00ff00', '#0000ff', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],name: '访问来源',type: 'pie', // 设置图表类型为饼图radius: '55%', // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。//roseType: 'angle', data:[ // 数据数组，name 为数据项名称，value 为数据项值{value:235, name:'视频广告'},{value:274, name:'联盟广告'},{value:310, name:'邮件营销'},{value:335, name:'直接访问'},{value:400, name:'搜索引擎'}]}]})</script>
</body>
</html>
异步加载数据
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>第一个 ECharts 实例</title><script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script><!-- 引入 echarts.js --><script src="https://cdn.staticfile.org/echarts/4.3.0/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'));$.get('https://www.runoob.com/static/js/echarts_test_data.json', function (data) {myChart.setOption({series : [{name: '访问来源',type: 'pie', // 设置图表类型为饼图radius: '55%', // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。data:data.data_pie}]})}, 'json')</script>
</body>
数据集
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>第一个 ECharts 实例</title><!-- 引入 echarts.js --><script src="https://cdn.staticfile.org/echarts/4.3.0/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 = {legend: {},tooltip: {},dataset: {// 提供一份数据。source: [['product', '2015', '2016', '2017'],['Matcha Latte', 43.3, 85.8, 93.7],['Milk Tea', 83.1, 73.4, 55.1],['Cheese Cocoa', 86.4, 65.2, 82.5],['Walnut Brownie', 72.4, 53.9, 39.1]]},// 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。xAxis: {type: 'category'},// 声明一个 Y 轴，数值轴。yAxis: {},// 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。series: [{type: 'bar'}, # 可用 line{type: 'bar'}, # 可用 line{type: 'bar'} # 可用 line]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);</script>
</body>
</html>
交互组件
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>ECharts 实例</title><!-- 引入 echarts.js --><script src="https://cdn.staticfile.org/echarts/4.3.0/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 = {xAxis: {type: 'value'},yAxis: {type: 'value'},dataZoom: [{ // 这个dataZoom组件，默认控制x轴。type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件start: 10, // 左边在 10% 的位置。end: 60 // 右边在 60% 的位置。}],series: [{type: 'scatter', // 这是个『散点图』itemStyle: {opacity: 0.8},symbolSize: function (val) {return val[2] * 40;},data: [["14.616","7.241","0.896"],["3.958","5.701","0.955"],["2.768","8.971","0.669"],["9.051","9.710","0.171"],["14.046","4.182","0.536"],["12.295","1.429","0.962"], ["4.417","8.167","0.113"],["0.492","4.771","0.785"],["7.632","2.605","0.645"],["14.242","5.042","0.368"]]}]}// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);</script>
</body>
</html>其中 data 的结构为： [[x1, y1, z1], [x2, y2, z2], ...] 其中 x 表示 x 轴，y 表示 y 轴，z 表示点的权重，z 越大，点在图中的显示也就越大。
事件处理
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>ECharts 实例</title><!-- 引入 echarts.js --><script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body><!-- 为ECharts准备一个具备大小（宽高）的Dom --><div id="main" style="height: 100%;min-height:400px;"></div><script type="text/javascript">// 基于准备好的dom，初始化ECharts实例var myChart = echarts.init(document.getElementById('main'));var app = {};option = null;// 指定图表的配置项和数据var option = {title : {text: '饼图程序调用高亮示例',x: 'center'},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)'}}}]};app.currentIndex = -1;setInterval(function () {var dataLen = option.series[0].data.length;// 取消之前高亮的图形myChart.dispatchAction({type: 'downplay',seriesIndex: 0,dataIndex: app.currentIndex});app.currentIndex = (app.currentIndex + 1) % dataLen;// 高亮当前图形myChart.dispatchAction({type: 'highlight',seriesIndex: 0,dataIndex: app.currentIndex});// 显示 tooltipmyChart.dispatchAction({type: 'showTip',seriesIndex: 0,dataIndex: app.currentIndex});}, 1000);if (option && typeof option === "object") {myChart.setOption(option, true);}</script>
</body>
</html>
旭日图
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>ECharts 实例</title><!-- 引入 echarts.js --><script src="https://cdn.staticfile.org/echarts/4.3.0/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 = {series: {type: 'sunburst',data: [{name: 'A',value: 10,children: [{value: 3,name: 'Aa',//itemStyle: {// color: 'blue'//}}, {value: 5,name: 'Ab'}]}, {name: 'B',children: [{name: 'Ba',value: 4}, {name: 'Bb',value: 2}]}, {name: 'C',value: 3}]}};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);</script>
</body>
</html>
echarts 常用图表示例相关推荐
- ECharts 常用图表一看即会「散点图」「饼图」「地图」「雷达图」「仪表盘」
文接上篇 ECharts 入门知识 ECharts 入门真的很简单 ,本文继续介绍 ECharts 常用图表相关内容. 一.散点图 散点图多用于推断不同维度数据之间的相关性,如下图判断身高体重相关性散 ...
- Apache Echarts常用图表之柱状图
文章目录 Echarts常用图表 柱状图 1. 柱状图的实现步骤 2. 柱状图的常见效果 最大值\最小值 `markPoint` 平均值 `markLine` 数值显示 `label` 柱宽度 `ba ...
- Apache Echarts常用图表之折线图
文章目录 Echarts常用图表 折线图 1. 折线图的实现步骤 2. 折线图的常见效果 最大值\最小值 `markPoint` 平均值 `markLine` 标注区间 `markArea` 数值显示 ...
- ECharts常用图表 饼图
1.图表4 饼图 1.1.饼图的实现步骤 步骤1 ECharts 最基本的代码结构 此时 option 是一个空空如也的对象 步骤2 准备数据 步骤3 准备配置项 在 series 下设置 type: ...
- uCharts常用图表示例
最近又做了一些uniapp,之前也做过,但是还没记录过关于uniapp的东西,所以这篇先来上一些我最近项目中做的一些常用的图表示例 先上几个官方网址 uniapp官网 DCloud插件市场 uChar ...
- 数据可视化ECharts的七大常用图表，看完就会用(1)
本文的后半部分:数据可视化ECharts的常用图表,看完就会用(2) 文章目录 数据可视化 什么是数据可视化? 数据可视化的好处 数据可视化的实现方式 ECharts ECharts的特性 一个ECh ...
- ECharts常用配置项
ECharts常用配置 setOption()绘制图表 使用 echarts 实例的 setOption() 可以设置图表实例的配置项以及数据,万能接口,所有参数和数据的修改都可以通过 setOpti ...
- Vue+ECharts的小示例
Vue+ECharts做数据可视化 1. Vue Vue 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手, ...
- 在Java web页面使用ECharts制作图表
前言 因为最近在做一项课设,需要可视化,因此选择echarts.但因为太久没用了,所以忘记了怎么在web页面引用echarts,在这里做个记录,开发工具是VSCODE. 一.下载echarts.min ...
最新文章
- 2017 年初、阿里、腾讯、百度、华为、京东、搜狗和滴滴面试题汇集（更新篇）...
- 直播 | 帝国理工王剑虹：配电网中用多智能体强化学习进行的主动电压控制
- 的union_C语言“隐秘的角落”——union没那么简单
- 怎么用c语言表示大整数的四则运算,用c语言编写大整数的四则运算，求大神
- 【effective c++】继承与面向对象设计
- CSS属性和值--备份
- C++ 构造函数、析构函数、拷贝构造函数
- 【词向量】从Word2Vec到Bert，聊聊词向量的前世今生（一）
- ubuntu在xampp下安装memcache扩展
- Android Lint简介
- [Jmeter][基础]Jmeter连接IMPALA
- Keli 编译遇到 *** FATAL ERROR L250: CODE SIZE LIMIT IN RESTRICTED VERSION EXCEEDED且已经破解
- 误将系统装入D盘 原来数据如何恢复
- 电子书：《网页木马攻防实战》
- 数列求和再求极限问题
- python生成exe文件
- zyt-Linux云计算
- 327 玉米田（状态压缩dp）
- 04-前端技术_ javaScript内置对象与DOM操作
- 全红婵水花消失术是怎样炼成的，郭晶晶都羡慕她怎么跳得那么好
热门文章
- job运行失败分析方法
- 尚硅谷Docker实战教程-笔记02【安装docker、镜像加速器配置】
- cmd界面英文变中文
- 转solarwinds-NPM.12.3安装流程安装方法
- html中index是什么作用,js中index是什么意思
- 南京航空航天大学c语言课程设计-交通处罚单,南京航空航天大学 - 财务处
- DSPACE设置斑马线和道路箭头
- 【论文阅读】You Are What You Do：通过数据来源分析寻找隐蔽的恶意软件
- 天猫精灵java开发工程师工资_李双印-天猫精灵2020年校招(对话系统方向)
- 吉林2021高考成绩排名查询,2021吉林市地区高考成绩排名查询,吉林市高考各高中成绩喜报榜单...