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选项卡整合的时候,默认 ...
随机推荐
- 命令行编译和执行java代码
虽然现在IDE很强大又很智能,但是平常随意写点练手的代码的时候,直接在命令行中使用vim和java命令更为方便快捷,可以做到无鼠标纯键盘的操作. 首先保证将java相关指令添加到了环境变量中: 1.编 ...
- （亲自实践）解决安装weditor报错UnicodeDecodeError: ‘gbk‘ codec can‘t decode byte 0xad in position 825
升级weditor时,报错:UnicodeDecodeError: 'gbk' codec can't decode byte 0xad in position 825: illegal multib ...
- Linux xfs文件系统stat命令Birth字段为空的原因探究
在Linux平台找出某个目录下创建时间最早的文件,测试验证脚本结果是否准确的过程中发现一个很有意思的现象,stat命令在一些平台下Birth字段有值,而在一些平台则为空值,如下所示: RHEL 8.7 ...
- golang版本sdl2显示窗体
golang版本sdl2显示窗体 go用syscall调用sdl2,在win10 x64上没问题,其他系统不敢保证. 见地址 package main import ( "fmt" ...
- ESLint: Expected a space before ‘/>；‘, but not found. (vue/html-closing-bracket-spacing)
文件->设置->编辑器->代码样式->HTML->其他-->在空的标签(打钩)
- TypeError: Cannot read property 'upgrade' of undefined
解决方案: 在你的.env.dev配置文件中配置VUE_APP_BASE_API并对target赋值
- Row size too large. The maximum row size for the used table type, not counting BLOBs, is 65535.
问题描述 新建表或者修改表varchar字段长度的时候,出现这个错误 Row size too large. The maximum row size for the used table type, ...
- jmeter如何保存变量到结果jtl文件里
将变量保存到结果jtl文件里,可以方便的在generate报告时,自行取用jtl中的变量进行展示,实现过程如下: 1.打开jmeter/bin目录下的jmeter.properties文件,将变量名加 ...
- 2019年蓝桥杯C／C++大学B组省赛真题(数的分解)
题目描述: 把2019分解成3个各不相同的正整数之和,并且要求每个正整数都不包含数字2和4,一共有多少种不同的分解方法? 注意交换3个整数的顺序被视为同一种方法,例如1000+1001+18 和100 ...
- 微软Build 2023两大主题：Copilots和插件
在本周大型微软人工智能 2023 开发者大会的开幕式上,人工智能站到了舞台中央--前台和后台以及介于两者之间的所有舞台. 贯穿会议的两个主要主题是Copilots - 涵盖广泛产品和服务的AI助手 - ...