使用echarts绘制图表X轴数据现实不全,及X轴现实两行问题解决

标签: echarts  js  数据可视化

使用echarts绘制图表X轴数据现实不全,及X轴现实两行问题解决

在一次开发中需要将一些数据以柱状图的形式导出来,但因为要展示的数据中X轴数据较多,全部展示数据会重叠,并且需要在图表中加入Y轴数据的平均数据的直线,但在echarts官方提供的实例中无法满足需求,为此参考文档完成效果。

其中具体属性及实现方法如下代码现实:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
</head>

<body>
    <div id="main" style="width: 600px;height:400px;"></div>

    <script>
        var myChart = echarts.init(document.getElementById('main'));		//初始化

        var Xzrdw = ['壹 类别','贰 类别','叁 类别','肆 类别','陆 类别','柒 类别','捌 类别','玖 类别'];
        var Ytzbl = ['15.2','26.3','29.5','35.6','45.6','51.2','39.9','42.1','36.6'];
        var Yyavg = [22,23,15,16,30,19,32,31,26];

        var option = {
            color: ['#3398DB'],   //主颜色
            grid: { 		//控制图表上下左右距离
                left: '5%',
                right: '5%',
                bottom: '3%',
                containLabel: true      //是否包含标签
            },
            xAxis: {
                type: 'category',   
                data: Xzrdw.map(function (str) { return str.replace(' ', '\n\n'); }),     //将X轴数据显示为两行
                axisLabel: {
                    interval: 0,        //X轴数据全部显示
                    //rotate: 50          //X轴数据倾斜显示
                }
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    formatter: '{value} %'      //Y轴标签
                }
            },
            series: [{      
                type: 'bar',		//柱状
                animation: false,		//是否开启动画加载
                barWidth: '60%',		//柱子之间的距离
                data: Ytzbl,
                label: {        //柱状的标签
                    show: true,          //是否显示
                    formatter: '{c} %',     //显示格式
                    position: 'top'         //在哪显示 不写默认为柱状中间
                }
            },
            {
                type: 'line',       //线
                color: '#d14a61',		//线条颜色
                animation: false,
                itemStyle: {
                    normal: {
                        lineStyle: {
                            width: 4		//调节线条粗细
                        }
                    }
                },
                symbolSize: 0,		//节点符号大小
                data: Yyavg,
                markLine: {     //求线性【Yyavg】的平均值并展示
                    data: [
                        { type: 'average', name: '平均值' },
                        {
                            symbol: 'none',
                            x: '90%',
                            yAxis: 'max'
                        }
                    ]
                }
            }]
        };

        myChart.setOption(option);

        //用于获取图表base64字节,可传入后台生成图片
        //var imageBase64 = myChart.getDataURL("png");

    </script>
</body>

</html>

以上为实现代码;其实现后效果图片如下:
实现效果图
图片中X轴数据现实为两行,红色虚线为折线数据的平均数,如要加入图列说明可参考官方文档(很简单);

版权声明:本文为M522972原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/M522972/article/details/107524529

智能推荐

php输出语句

php输出语句 常见的输出语句 echo(): 可以一次输出多个值,多个值之间用逗号分隔。echo是语言结构(language construct),而并不是真正的函数,因此不能作为表达式的一部分使用。 print(): 函数print()打印一个值(它的参数),如果字符串成功显示则返回true,否则返回false。 print_r(): 可以把字符串和数字简单地打印出来,而数组则以括起来的键和值...

工厂模式

简介 常见的实例化对象模式。 用工厂方法替代new操作的一种模式。 当我们使用new操作实例化对象时,调用构造函数完成初始化。若初始化仅是进行赋值等简单的操作,写入构造函数即可。但如果初始化时需要执行一长串复杂的代码,将多个工作装入一个方法,是不妥的。 创建实例与使用实例分离。将创建实例所需的大量初始化工作从基类的构造函数中分离出去。 简单工厂模式、工厂方法模式针对的是一个产品等级结构;而抽象工厂...

B1105 Spiral Matrix (画图)

B1105 Spiral Matrix (25分) //第一次只拿了21分 矩阵的长和宽,求最大因子,从sqrt(num)开始枚举. 每次循环一次,s++,t--,d--,r++ 测试点四运行超时,是因为输入一个数字的时候,需要直接输出这个数字。//1分 测试点二运行超时,最后一个数字不必再while循环一次,直接输出即可。//3分 最后一个测试点卡了好久/(ㄒoㄒ)/~~ 螺旋矩阵...

Java基础=>String,StringBuffer与StringBuilder的区别

字符串常量池 什么是字符串常量池? JVM为了减少字符串对象的重复创建,其维护了一块特殊的内存,这段内存被称为字符串常量池(存储在方法区中)。 具体实现 当代码中出现字符串时,JVM首先会对其进行检查。 如果字符串常量池中存在相同内容的字符串对象,如果有,则不再创建,直接返回这个对象的地址返回。 如果字符串常量池中不存在相同内容的字符串对象,则创建一个新的字符串对象并放入常量池,并返回新创建的字符...

java调用其他java项目的Https接口

项目中是这样的: 用户拿出二维码展示,让机器识别二维码, 机器调用开门的后台系统接口, 然后开门的后台系统接口需要调用管理系统的接口, 管理系统需要判断能不能开门.这两个系统是互相独立的.当时使用http调用是没有问题的.当时后来要求必须用https.废话不说,直接代码: 我的项目中调用的是 HttpsUtils.Get(utlStr) 这个接口 开门系统接口如下图:   管理系统的接口...

猜你喜欢

Hadoop1.2.1全分布式模式配置

一 集群规划 主机名            IP                               安装的软件 &nbs...

Go语言gin框架的安装

尝试安装了一下gin,把遇到的一些小问题来记录一下 安装步骤 首先来看看官方文档,链接点这里 可以看到安装步骤很简单,就一句话 在命令行中输入这句话运行等待就好。 问题来了,因为墙的问题,go get会很慢,所以命令行里面半天什么反应也没有,不要急,慢慢等着就会看到gin-gonic/gin这个目录出现 这个时候命令行还是没有结束,表示还在下一些东西。有的时候可能心急的人就停了(比如我),然后写个...

uni-app表单组件二

input(输入框) 属性名 类型 说明 平台差异 value String 输入框的初始内容 type String input 的类型 password Boolean(默认false) 是否是密码类型 placeholder String 输入框为空时占位符 placeholder-style String 指定 placeholder 的样式 placeholder-class Strin...

深入理解 JavaScript 代码执行机制

深入理解 JavaScript 代码执行机制 前言 本文仅为个人见解,如有错误的地方欢迎留言区探讨和指正。 1、餐前甜品 如下是一段 JavaScript 代码,如果你毫不犹豫的说出代码执行顺序。那么请直接滚动到底部,留下你的足迹,接受膜拜。如果还不是很确定,那么请往下继续查看。 2、磨刀不误砍柴工(了解浏览器原理) (1) 进程和线程 进程是cpu资源分配的最小单位(是能拥有资源和独立运行的最小...

Centos7下配置DRBD Cluster扩展节点

操作环境 CentOS Linux release 7.4.1708 (Core) DRBDADM_BUILDTAG=GIT-hash:\ ee126652638328b55dc6bff47d07d6161ab768db\ build\ by\ [email protected]\,\ 2018-07-30\ 22:23:07 DRBDADM_API_VERSION=2 DRBD_KERNEL_VER...