Echarts: 同时显示柱状图和前端
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>第一个 ECharts 实例</title>
<!-- 引入 echarts.js -->
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 600px; height: 400px"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById("main"));
// 指定图表的配置项和数据
var option = {
tooltip: {
trigger: "axis",
formatter: "{b0}({a0}): {c0}<br />{b1}({a1}): {c1}%",
},
legend: {
data: ["销量", "占比"],
},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
},
yAxis: [
{
type: "value",
name: "销量",
show: true,
interval: 10,
axisLine: {
lineStyle: {
color: "#5e859e",
width: 2,
},
},
},
{
type: "value",
name: "占比",
min: 0,
max: 100,
interval: 10,
axisLabel: {
formatter: "{value} %",
},
axisLine: {
lineStyle: {
color: "#5e859e", //纵坐标轴和字体颜色
width: 2,
},
},
},
],
series: [
{
name: "销量",
type: "bar",
barWidth: "50%",
data: [5, 20, 36, 10, 10, 20],
},
{
name: "占比",
type: "line",
smooth: true,
data: [15, 30, 46, 20, 20, 30],
},
],
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
效果图展示
重点标记
使用图表类型
参考链接
https://blog.csdn.net/qq_38974638/article/details/108858145
Echarts: 同时显示柱状图和前端的更多相关文章
- 前端统计图 echarts 实现简单柱状图
前端统计图 echarts实现简单柱状图 1. 引入 ECharts <!DOCTYPE html> <html> <head> <meta charse ...
- ajax导致Echarts不显示饼图数据、柱状图数据只显示气泡的问题。
1.ajax导致Echarts不显示饼图数据.柱状图数据只显示气泡的问题. ajax的同步.这个同步的意思是当JS代码加载到当前ajax的时候会把页面里所有的代码停止加载,页面出去假死状态,当这个aj ...
- 如何基于 echarts 实现区间柱状图（包括横向）？
目录 需求 借鉴 echarts 的 demo 最终实现思路 实现效果 遇到的问题: 代码映射 源码 最后 始终如一 需求 需要利用 echarts 实现区间柱状图,效果如下: 效果来源于:g2-柱状 ...
- echarts报表显示%+没有0
function showTablegroup(page) { var series; $.ajax({ type:'post', url:"<%=basePath%>flowA ...
- echarts如何显示在页面上
echarts如何显示在页面上 1.引入echarts的相关.js文件 <script src="js/echarts.min.js"></script> ...
- echarts —— 绘制横向柱状图（圆角、无坐标轴）
UI给了设计图,看了一眼觉得简单,不就是无序列表布局嘛(ul,li),后来才知道那是echarts图,好吧,样式如下: 代码如下:(渐变色没做) <!DOCTYPE html> <h ...
- echarts来显示世界地图和全国地图，并且可以下钻层级
echarts来显示世界地图和全国地图,并且可以下钻层级 使用echarts来显示世界地图和全国地图,并且可以下钻层级 使用的技术 现有的功能 遇到的问题解决 总结 参考内容 直接来源码,地球资源包我 ...
- 【前端统计图】echarts实现简单柱状图
图片.png <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <ti ...
- echarts在一个折线/柱状图浮窗显示多条数据
解决问题就在data里面,首先 data里面是可以json数组形式,如官方API上的 name:”“, value:”“,等 value是echart识别折线图的key值.1.来看数据格式 data: ...
- 解决Bootstrap 标签页(Tab)插件切换echarts不显示问题
1.参考连接:https://blog.csdn.net/qq_24313955/article/details/78363981 问题描述:在echarts跟bootstrap选项卡整合的时候,默认 ...
随机推荐
- Vue中插槽的使用
1.作用:让父组件可以向子组件指定位置插入html结构,也是一种组件间通信的方式,适用于 父组件 ===> 子组件 . 2.分类:默认插槽.具名插槽.作用域插槽 3.使用方式: ①默认插槽 ...
- ai问答：使用 Vue3 组合式API 和 TS 父子组件共享数据
这是一个使用 Vue3 组合式 API 和 TypeScript 的简单父子组件共享数据示例 父组件 Parent.vue: <template> <div> <p> ...
- 使用 Sa-Token 完成踢人下线功能
一.需求 在企业级项目中,踢人下线是一个很常见的需求,如果要设计比较完善的话,至少需要以下功能点: 可以根据用户 userId 踢出指定会话,对方再次访问系统会被提示:您已被踢下线,请重新登录. 可以 ...
- .NET Core 离线生成 Tron 波场私钥和地址笔记
NuGet 引入依赖库 PM> Install-Package Tron.Wallet.Net 随机生成私钥和对应的地址 using Tron.Wallet.Net; namespace Con ...
- Spring源码：Bean生命周期（四）
前言 在之前的文章中,我们介绍了 Bean 的核心概念.Bean 定义的解析过程以及 Bean 创建的准备工作.在今天的文章中,我们将深入探讨 Bean 的创建过程,并主要讲解 createBean ...
- Django4全栈进阶之路3 apps.py 文件
在 Django 4 中,每个应用(app)都需要定义一个 apps.py 文件,用于配置应用的基本信息,如应用的名称.显示名称.图标.默认路径.启动时需要执行的操作等.apps.py 文件是一个 P ...
- Javascript 常见的循环方式总结
本文地址: https://www.cnblogs.com/zichliang/p/17412968.html 在Javascript中有很多种循环方式.有多种循环方式可以用来遍历数组.对象.以及执行 ...
- 代码随想录算法训练营Day28 回溯算法 | 491.递增子序列 46.全排列 47.全排列 II
代码随想录算法训练营 491.递增子序列 题目链接:491.递增子序列 给定一个整型数组, 你的任务是找到所有该数组的递增子序列,递增子序列的长度至少是2. 示例: 输入: [4, 6, 7, 7] ...
- MYSQL数据库的创建和删除
打开Windows命令行,输入登录用户和密码 mysql -h localhost -u root -p 创建新数据 CREATE DATABASE zoo; 查看系统中的数据库 SHOW DATAB ...
- Java关键字break、continue 、return的区别，嵌套循环，数组的概念以及数组案例
一.关键字 break.continue .return的区别 1.break : 用于在switch..case中放置语句块穿透, 用于跳出循环 // 从1-100 遇到7的倍数 break f ...