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选项卡整合的时候,默认 ...
随机推荐
- 小程序TS报错 "无法重新声明块范围变量。此处也声明了xx "
初学者简单的方法,目前还没有遇到问题 想法很简单,当export导出,骗eslint认为是一个模块. 如果有新的问题欢迎留言,我也在学习 1 import utilsApi from '../util ...
- celery+Rabbit MQ简单的Demo
介绍 一个简单的celery + rabbitmq 的搭建例子,用于记录 Celery 异步处理框架, 安装命令 pip install celery RabbitMQ 消息中间件,用来做队列 安装配 ...
- 2022-08-10：为了给刷题的同学一些奖励，力扣团队引入了一个弹簧游戏机， 游戏机由 N 个特殊弹簧排成一排，编号为 0 到 N-1， 初始有一个小球在编号 0 的弹簧处。若小球在编号为 i 的弹
2022-08-10:为了给刷题的同学一些奖励,力扣团队引入了一个弹簧游戏机, 游戏机由 N 个特殊弹簧排成一排,编号为 0 到 N-1, 初始有一个小球在编号 0 的弹簧处.若小球在编号为 i 的弹 ...
- mysql 5.7 json 类型 json 数组类型 普通字符串类型 10w数据 查询速度差异
json 非数组 建表语句ddl CREATE TABLE tb_json_test ( id INT NOT NULL AUTO_INCREMENT, user_no VARCHAR(100), u ...
- vue全家桶进阶之路37：Vue3 路由守卫
在 Vue.js 3.x 中,我们可以使用路由守卫来拦截路由的跳转,从而实现一些功能,例如:登录验证.页面权限控制等. Vue.js 3.x 中的路由守卫和 Vue.js 2.x 中的基本相同,都包含 ...
- phpstudy-pikachu-数字型注入（post）
抓包搞到格式 id=1&submit=%E6%9F%A5%E8%AF%A2 查字符段 id=1 order by 2&submit=%E6%9F%A5%E8%AF%A2 id=1 un ...
- java通用xls导出设计
背景 在后端日常开发中总会有各种各样的导出需求,实现这个需求必须要解决的两个问题: 1.表头不能直接使用字段名,需要显示为中文,甚至还需要考虑国际化 2.值需要翻译,比如性别.状态之类的字段 现状 现 ...
- macbook苹果m1芯片训练机器学习、深度学习模型,resnet101在mnist手写数字识别上做加速，torch.device("mps")
apple的m1芯片比以往cpu芯片在机器学习加速上听说有15倍的提升,也就是可以使用apple mac训练深度学习pytorch模型!!!惊呆了 安装apple m1芯片版本的pytorch 然后使 ...
- weex 开发APP 多行文本溢出处理
weex中文字溢出不能使用常规的overflow:hidden 如: .text { overflow: hidden; text-overflow: ellipsis; white-space: n ...
- linux 递归和函数实验
递归 作用:自己调用自己 1.例子:阶乘 2.遍历目录下所有文件 函数 1.函数能够接受一个参数,参数为用户名: 判断一个用户是否存在 如果存在,就返回此用户的shell 和 UID :并返回正常状态 ...