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选项卡整合的时候,默认 ...
随机推荐
- [OpenCV-Python] 13 颜色空间转换
文章目录 OpenCV-Python:IV OpenCV中的图像处理 13 颜色空间转换 13.1 转换颜色空间 13.2 物体跟踪 13.3 怎样找到要跟踪对象的 HSV 值? OpenCV-Pyt ...
- 微信小程序搜索不到腾讯服务路线规划插件的解决方法
具体操作如下: 提示:主要内容都是按开发文档来写的 开发文档: 链接: https://lbs.qq.com/miniProgram/plugin/pluginGuide/routePlan 添加插件 ...
- define定义常量和宏
define:预处理指令 使用方法有两种 1.define定义符号 denfine定义常量 2.define定义宏 宏是有参数的,它的参数是替换 常规来说这样写define定义宏没啥问题 但是这样写 ...
- NFS共享存储实战
NFS共享存储实战 目录 NFS共享存储实战 NFS基本概述 为什么要使用共享存储 企业中文件服务器(共享存储) NFS应用场景 集群没有共享存储时 集群有共享存储 NFS实现原理 NFS的函数 本地 ...
- pytest—添加日志
开头 保存工作中常用的日志. pytest有自己的日志管理的开关,不需要用到python的日志库 开始 在文件根目录下新建一个pytest.ini文件 基本设置 [pytest] log_cli=tr ...
- 2022-04-08：在一张 无向 图上，节点编号0~N-1。老鼠开始在1节点，猫在2节点，0号节点是洞，老鼠想进洞， 老鼠第先出发，猫后出发，轮流行动。 在每个玩家的行动中，他们 必须 沿着图中与所
2022-04-08:在一张 无向 图上,节点编号0~N-1.老鼠开始在1节点,猫在2节点,0号节点是洞,老鼠想进洞, 老鼠第先出发,猫后出发,轮流行动. 在每个玩家的行动中,他们 必须 沿着图中与所 ...
- 2022-03-03：课程表 III。 这里有 n 门不同的在线课程，按从 1 到 n 编号。给你一个数组 courses ，其中 courses[i] = [durationi, lastDayi]
2022-03-03:课程表 III. 这里有 n 门不同的在线课程,按从 1 到 n 编号.给你一个数组 courses ,其中 courses[i] = [durationi, lastDayi] ...
- Django 与 Vue 语法冲突问题完美解决方法
Django 与 Vue 语法冲突问题完美解决方法 当我们在 django web 框架中,使用 vue 的时候,会遇到语法冲突. 因为 vue 使用 {{}}, 而 django 也使用 {{}}, ...
- springboot mvc配置原理+扩展springmvc（重点）
1.新建config目录 2.在config目录下创建自定义配置类 3.根据官方文档得到要有注解@Configuration并且继承类WebMvcConfigurer 扩展springmvc:我们慢慢 ...
- 【模型部署 01】C++实现分类模型（以GoogLeNet为例）在OpenCV DNN、ONNXRuntime、TensorRT、OpenVINO上的推理部署
深度学习领域常用的基于CPU/GPU的推理方式有OpenCV DNN.ONNXRuntime.TensorRT以及OpenVINO.这几种方式的推理过程可以统一用下图来概述.整体可分为模型初始化部分和 ...