echarts 柱状图+折线+文字倾斜及省略
效果图：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>柱状图、折线图</title>
<script src="js/jquery-2.2.3.min.js"></script>
<script src="./js/echarts.min.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="demo" style="width: 450px;height: 300px"></div>
</body>
<script>
/*
* 知识点：
* 1、各个线条颜色设置
* 2、X轴 坐标文字过长 倾斜、拼接省略号显示
* 3、异步插入图表数据
* */ //初始化一个 echarts 实例
var chart = echarts.init(document.getElementById('demo'));
//指定图表的配置项和数据
var option = {
backgroundColor: 'rgba(70, 131, 254, .3)',//设置背景色
tooltip: {//提示框组件
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
legend: {//图例组件
data:[{name:'已解决',icon:'circle'},{name:'未解决',icon:'circle'},{name:'总量'}],
textStyle:{
color:'#ffffff',
fontSize:12
},
y: 'bottom',
x: 'center' ,
},
xAxis: [//直角坐标系 grid 中的 x 轴
{
type: 'category',
axisLine:{
lineStyle:{
color:'#999999',//设置X轴颜色
width:1
}
},
data: [],//数据留待异步插入
axisPointer: {
type: 'shadow'
},
axisLabel:{
interval:0,//横轴信息全部显示
rotate:45,//度角倾斜显示
formatter:function(value){//只显示五个字 其余省略号
return value.length > 5?value.substring(0,5)+'...':value;
}
}
}
],
yAxis: [//直角坐标系 grid 中的 y 轴
{
type: 'value',
splitLine:{
show:true ,
lineStyle:{
color:'#ab0e23',//设置Y轴 分隔线 颜色
width: 1
}
},
axisLine:{
lineStyle:{
color:'#999999',//设置Y轴颜色
width:1
}
},
name: '单位（个）',
// min: 0,//Y坐标最小值
// max: 1000,Y坐标最大值
// interval: 50,//坐标间隔
}
],
series : [
{
name:'已解决',
barWidth: '30%',
type:'bar',//柱状/条形图
itemStyle : {
color: '#6AC3F1'
},
data:[]//数据留待异步插入
},
{
name:'未解决',
barWidth: '30%',
type:'bar',//柱状/条形图
itemStyle : {
color: '#DD6B25'
},
data:[]//数据留待异步插入
},
{
name:'总量',
type:'line',//折线图
itemStyle : {
color: '#009944'
},
yAxisIndex: 0,
data:[]//数据留待异步插入
}
],
}; //使用刚指定的配置项和数据显示图表。
chart.setOption(option);
//异步插入图表数据
getChartData(chart) ; //获取图表数据并插入
function getChartData() {
// $.ajax({
// url: '/api/...',
// data: {},
// type: "POST",
// dataType: 'json',
// success: function(result){
var result = {
meg:'处理成功',
req:true,
rows:[
{
name: "部门一",
notSolveCount: 312,
solveCount: 42,
},
{
name: "部门二",
notSolveCount: 312,
solveCount: 200,
},
{
name: "部门三",
notSolveCount: 312,
solveCount: 42,
},
{
name: "很长名字的部门",
notSolveCount: 312,
solveCount: 42,
}, {
name: "部门四",
notSolveCount: 555,
solveCount: 42,
}, {
name: "部门五",
notSolveCount: 312,
solveCount: 42,
}, {
name: "很长名字的部门",
notSolveCount: 312,
solveCount: 42,
}, {
name: "很长名字的部门",
notSolveCount: 750,
solveCount: 42,
},
{
name: "很长名字的部门",
notSolveCount: 312,
solveCount: 42,
},
{
name: "很长名字的部门",
notSolveCount: 312,
solveCount: 42,
},
{
name: "很长名字的部门",
notSolveCount: 312,
solveCount: 42,
},
{
name: "很长名字的部门",
notSolveCount: 312,
solveCount: 500,
},
]
}
var _name = [], _resolved = [] , _unsolved = [] , _gross = [];
if (result.rows.length > 0) {
$.each(result.rows,function (i,v) {
_name.push(v.name);
_resolved.push(v.solveCount);
_unsolved.push(v.notSolveCount);
_gross.push(v.notSolveCount + v.solveCount);
});
//像图表中插入数据
chart.setOption({
series : [
{
data:_resolved
},
{
data:_unsolved
},
{
data:_gross
}
],
xAxis : [
{
data:_name
}
]
});
}
// }
// });
}
</script>
</html>
echarts 柱状图+折线+文字倾斜及省略的更多相关文章
- echarts柱状图坐标文字显示不完整解决方式
echarts柱状图坐标文字显示不完整解决方式 本文转载自:https://jingyan.baidu.com/article/ab69b2707a9aeb2ca7189f0c.html echart ...
- 关于echarts绘制树图形的注意事项(文字倾斜、数据更新、缓存重绘问题等)
最近项目中使用到echarts的树操作,对其中几点注意事项进行下总结. 效果图: 1.基础配置 options的配置如下: { tooltip: { trigger: 'item', triggerO ...
- [置顶]
echarts x轴文字显示不全(xAxis文字倾斜比较全面的3种做法值得推荐)
echarts x轴标签文字过多导致显示不全 如图: 解决办法1:xAxis.axisLabel 属性 axisLabel的类型是object ,主要作用是:坐标轴刻度标签的相关设置.(当然yAxis ...
- C# 绘制统计图(柱状图, 折线图, 扇形图)【转载】
统计图形种类繁多, 有柱状图, 折线图, 扇形图等等, 而统计图形的绘制方法也有很多, 有Flash制作的统计图形, 有水晶报表生成统计图形, 有专门制图软件制作, 也有编程语言自己制作的:这里我们用 ...
- 2-Highcharts 3D图之3D柱状图带可调试倾斜角度
<!DOCTYPE> <html lang='en'> <head> <title>2-Highcharts 3D图之3D柱状图带可调试倾斜角度< ...
- C# 绘制统计图(柱状图, 折线图, 扇形图)
统计图形种类繁多, 有柱状图, 折线图, 扇形图等等, 而统计图形的绘制方法也有很多, 有Flash制作的统计图形, 有水晶报表生成统计图形, 有专门制图软件制作, 也有编程语言自己制作的:这里我们用 ...
- Asp.net 用 Graphics 统计图(柱状图, 折线图, 扇形图)
统计图形种类繁多, 有柱状图, 折线图, 扇形图等等, 而统计图形的绘制方法也有很多, 有Flash制作的统计图形, 有水晶报表生成统计图形, 有专门制图软件制作, 也有编程语言自己制作的:这里我们用 ...
- Echarts柱状图实现不同颜色渐变色
第一次写文,只是想记录一下自己平时发现的小功能,这篇主要是实现echarts柱状图,每个柱子实现不同颜色的渐变色,也是第一次接触echarts,后台使用ssm,前台是extjs,直接上效果图 直接上j ...
- echarts x轴文字显示不全解决办法
标题:echarts x轴文字显示不全(xAxis文字倾斜比较全面的3种做法值得推荐):http://blog.csdn.net/kebi007/article/details/68488694
随机推荐
- 【AHOI 2013】差异
Problem Description 给定一个长度为 \(n\) 的字符串 \(S\),令 \(T_i\) 表示它从第 \(i\) 个字符开始的后缀.求 \(\sum_{1\leqslant i&l ...
- SpringCloud-创建服务消费者-Feign方式(附代码下载)
场景 SpringCloud-服务注册与实现-Eureka创建服务注册中心(附源码下载): https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/deta ...
- BOM对象——History
BOM对象--History <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- CSS入门（背景各种属性的详解、垂直居中和过渡效果的详解、渐变效果的简单讲解、雪碧图和精灵图）
一.各种背景属性 1.background-image 属性为元素设置背景图像. 元素的背景占据了元素的全部尺寸,包括内边距和边框,但不包括外边距. 默认地,背景图像位于元素的左上角,并在水平和垂直方 ...
- More than one file was found with OS independent path 'lib/armeabi-v7a/libgnustl_shared.so'
More than one file was found with OS independent path 'xxx/xxx' 这个错误是在路径中出现了重复依赖. 解决办法是配置打包选项, 在 and ...
- 基于JS的ajax的实现，JSON和JSONP，基于JQuery的ajax的实现
基于JS的ajax的实现,JSON和JSONP,基于JQuery的ajax的实现1.基于JS的ajax的实现 step1: var xmlhttp = XMLHttprequest() #实例化一个对 ...
- 13-Node.js学习笔记-MongoDB
数据库相关概念 在一个数据库软件最终可以包含多个数据仓库,在每个数据仓库中可以包含多个数据集合,每个数据集合中可以包含多条文档(具体的数据) database: 数据库,mongoDB数据库软件中可以 ...
- 关于Xpath
1.xPath简介 XPath是一门在XML和HTML文档中查找信息的语言,可以用来在XML和HTML文档中对元素和属性进行遍历 XPath的安装 Chrome插件XPath Helper 点Chro ...
- 老版本nginx存在安全漏洞，不停服务热升级
1.场景描述 安全部通知:nginx存在"整数溢出漏洞",经测试2017年4月21日之后的版本无问题,将openresty升级到最新版本,Nginx升级到1.13.2之后的版本. ...
- ORA-00904:"WM_CONCAT":标识符无效
原创 Oracle 作者:Root__Liu 时间:2019-11-21 18:49:27 514 0 今天客户现场业务甩给我一个报错让处理,ora-00904:"WM_CONCAT&q ...