echarts 正负条形图

<script>$(function() {// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 指定图表的配置项和数据option = {title: [{text: '正负条形图',left: 'center',top: 20,textStyle: {color: 'blue',//fontSize: '14',},}, {text: '实验室',//borderColor: '#999',//borderWidth: 1,textStyle: {fontSize: 14},left: 'center',top: '88%'},],tooltip: {trigger: 'axis',//坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。axisPointer: { // 坐标轴指示器，坐标轴触发有效type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' |'cross'}},legend: {data: ['利润', '支出', '收入'],//bottom: '0',},grid: {left: '10%',right: '10%',bottom: '15%',containLabel: true},xAxis: [{type: 'category',axisTick: { //坐标轴刻度相关设置。show: false,},data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
//                      axisLine: {
//                          //show: true, //是否显示坐标轴轴线。
//                          //onZero:false,//X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上，只有在另一个轴为数值轴且包含 0 刻度时有效。
//                          //symbol:'arrow', //轴线两边的箭头lineStyle: {width: 2,color: 'green',},
//                      },}],yAxis: [{type: 'value',name: 'Z值',nameLocation: 'center',nameGap: 40}],series: [{name: '利润',type: 'bar',label: { //图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等normal: { //正常情况show: true, //是否显示标签position: 'inside', //标签的位置。distance: 5, //距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。default: 5rotate: 0, //标签旋转。从 -90 度到 90 度。正值是逆时针。}},data: [200, 170, 240, 244, 200, 220, 210]},{name: '收入',type: 'bar',stack: '总量', //数据堆叠，同个类目轴上系列配置相同的stack值可以堆叠放置。label: {normal: {show: true, //是否显示标签position: 'inside', //标签的位置。}},data: [320, 302, 342, 374, 390, 450, 420]},{name: '支出',type: 'bar',stack: '总量', label: {normal: {//正常情况show: true, //是否显示标签position: 'inside'}},data: [-120, -132, -102, -134, -190, -230, -210]}]};//myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);});</script>

echarts 正负条形图相关推荐

Echarts正负条形图将x轴都设置成正数
最近在做项目的时候需要用到 Echarts 的正负条形图,但是条形图的左半部分的数值是负数的,但是我们需要他也是正数的,话不多说,先上效果图: 所以需要做如下几步修改: 首先需要修改x轴上面显示为负数 ...
hdc mfc 画扇形图_使用echarts绘制条形图和扇形图
使用echarts绘制条形图和扇形图简单举例说明下echarts如何绘制条形图和扇形图代码示例 echarts绘制条形图和扇形图 var mychart1=echarts.init(documen ...
echart ——正负条形图
最近需要实现大致如图的图表效果,找了很多文章和官网配置说明最终版的配置如下: 可以通过定义一个函数,传入要展示在图表的数据,返回最终的图标配置如下, export const echartoption ...
echarts双向条形图案例
双向条形图图表效果如下: 具体代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...
echarts 横向条形图对比
横向条形图对比先看效果图代码:需要改动的数据我都提在了最前面: let yList = ['2月','对比2月']; let collectingMediaList = [766, 350]; ...
迪赛智慧数——柱状图（正负条形图）：2022年中国不同年龄段男女平均体重
效果图每逢佳节胖几斤,春节刚过,你"胖"了几斤? 据数据显示,2022年18-80岁男性平均体重75kg,女性平均体重59.8kg.男性35-39岁达到最重状态,平均76.1kg ...
迪赛智慧数——柱状图（正负条形图）：2022届毕业生不同城市的期望实际薪资
效果图 2022届毕业生实际薪资水平与期望水平存在一定差距,总体差距3000元左右.从整体看不同城市的整体薪资都远高于实际薪资,北京的期望薪资最高16000左右,而毕业生的实际薪资大多在10000左右 ...
ECharts——条形图
如何使用ECharts ECharts引入后,需要将使用到的的图放在一个DOM容器里,这就需要我们定义一个DOM用来存放. <body><!-- 为 ECharts 准备一个具备 ...
echart 正负图
<script> $(function() { // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getEleme ...
动态条形图(RunBargraph)用于数据展示
最近公司项目需要做各种图标展示,用了Echarts的条形图和柱状图,但是老板还是觉得不够生动,看来时候祭出大招了由此衍生在空余时间写下了此篇博客,首先还是看效果图: 注意,此图中数据并非真实数据,只 ...

echarts 正负条形图

echarts 正负条形图相关推荐

最新文章

热门文章