echarts柱状图多组数据配置

摘要:
有三组数据varmap4_Data1=[320,varmap4_data3=[150,选项配置:option={color:['#ffdf25','#36a9ce',{trigger:'axis','shadow'}}},grid:{left:right:'10%',true,'category',false},'value'}],series:'全国平均绩效','地区平均绩效',

一共三组数据

var map4_data1=[320, 332, 301, 334, 390,360,320, 332, 301, 334, 390,360];
var map4_data2=[220, 182, 191, 234, 290,320,220, 182, 191, 234, 290,320];
var map4_data3=[150, 232, 201, 154, 190,150,150, 232, 201, 154, 190,150];

option配置:

option = {
                        color: ['#ffdf25', '#36a9ce', '#d0e17d'],
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        grid: {
                            left: '0%',
                            right: '0%',
                            bottom: '10%',
                            top:'10%',
                            containLabel: true
                        },
                        calculable: true,
                        xAxis: [
                            {
                                type: 'category',
                                axisTick: {show: false},
                                data: ['1月', '2月', '3月', '4月', '5月','6月','7月','8月','9月','10月','11月','12月']
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value'
                            }
                        ],
                        series: [
                            {
                                name: '全国平均业绩',
                                type: 'bar',
                                barGap: 0,
                                data: map4_data1
                            },
                            {
                                name: '地区平均业绩',
                                type: 'bar',
                                data: map4_data2
                            },
                            {
                                name: '业务员业绩',
                                type: 'bar',
                                data: map4_data3
                            },
                        ]
                    };

结果:

echarts柱状图多组数据配置第1张

免责声明:文章转载自《echarts柱状图多组数据配置》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇洛谷 P2437 蜜蜂路线ArcGis 中空间数据的插入与更新下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

【转载】Vue+原生App混合开发

项目的大致需求就是做一个App,里面集成各种功能供用户使用,其中涉及到很多Vue的使用方法,单独总结太麻烦,所以通过这几篇笔记来梳理一下。原型图如下: 路由配置 主界面会用到一些原生App方法,比如验证用户身份等,故由原生App完成,进去的每个模块则全部都是HTML页面(有一种后端工作好轻松的感觉 ̄へ ̄)。由于传统的HTML页面开发起来效率太低,所以我选...

axios 学习文档

什么是 axios? Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。axios Github 特性 从浏览器中创建 XMLHttpRequests 从 node.js 创建 http 请求 支持 Promise API 拦截请求和响应 转换请求数据和响应数据 取消请求 自动转换 JSON 数据 客户端支持...

DataFrame数据合并

一、join 作用:默认情况下,他是把行索引相同的数据合并到一起注意:以左为准,没有的部分用NaN补全 例子 import pandas as pd import numpy as np df1 = pd.DataFrame(data=np.zeros((2, 5)), index=list('AB'), columns=list('VWXYZ')) #...

iview表格动态数据实现合并功能

需求原型:    代码实现: html部分: <Row> <Col span="24"> <Table stripe border :columns="columns1" :data="formData.dataTable" :span-method=...

微信浏览器禁止页面下拉查看网址(不影响页面内部scroll)

开发项目跑在微信浏览器经常会遇到一个问题,微信浏览器下拉的时候会出现自带的黑色底色(显示网址)如下图: 此类事件是手机touchmove默认事件行为,可以通过js代码隐藏事件: $(‘body’).on(‘touchmove’, function (event) {event.preventDefault();}); or document.addEve...

[小程序]微信小程序获取input并发送网络请求

1. 获取输入框数据wxml中的input上增加bindinput属性,和方法值在js部分定义与之对应的方法,只要在输入的时候,数据就会绑定调用到该方法,存入data属性变量中 2. 调用get请求发起网络请求调用wx.request发起网络请求 3.调用微信Toast接口展示结果 4.按钮绑定bindtap属性,当按钮点击的时候会调用对应的方法 inde...