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
随机推荐
- 浅析 Java 与 C++ 的垃圾回收机制
Java老师在期末复习大纲上出了一道关于JVM垃圾回收机制的题目,想要我们简述一下JVM垃圾回收机制,与老师交流后,大概老师是希望通过与其他语言在垃圾回收对比,介绍一下Java在这方面的特点和 ...
- 我也开源... React Native Messager
近期有空,玩转React Native. https://github.com/andyc365/ReactNativeMessager React Native Messager A React N ...
- ReactNative: 使用AsyncStorage异步存储类
一.简介 AsyncStorage是一个简单的具有异步特性可持久化的键值对key-value的存储系统.它对整个APP而言,是一个全局的存储空间,可以用来替代H5中提供的window属性LocalSt ...
- pctfree和pctused
pctfree 是指一个数据块保留的空间百分比,表示数据块在什么情况下可以被insert 默认是10,表示当数据块的可用空间低于10%后,就不可以被insert了,只能被用于update了 即:当使用 ...
- Ansible-下部
ansible-playbook playbook是由一个或多个模块组成的,使用多个不同的模块,完成一件事情. ansible软件特点 可以实现批量管理可以实现批量部署ad-hoc(批量执行命令)- ...
- C#面向对象-多态
面向对象的三大特性(封装,继承,多态)大多少人都应该知道.前两个的话比较容易理解.本文主要说一下面向对象中的多态. 什么是多态?不同的对象对同一操作,产生不同的执行结果.这就是多态.那么多态又包含了: ...
- RESTful 架构风格
在移动互联网的大潮下,『微服务』的概念也越来越被大家接受并应用于实践,日益增多的web service逐渐统一于RESTful 架构风格,如果开发者对RESTful 架构风格不甚了解,则开发出的所谓R ...
- MySQL索引查询原理
什么是索引? “索引”是为了能够更快地查询数据.比如一本书的目录,就是这本书的内容的索引,读者可以通过在目录中快速查找自己想要的内容,然后根据页码去找到具体的章节. 数据库也是一样,如果查询语句使用到 ...
- ASP.NET底层原理
上图基本上演示了IIS 6整个处理过程.在User Mode下,http.sys接收到一个基于aspx的http request,然后它会根据IIS中的Metabase查看该基于该Request的Ap ...
- JWT基础知识
1> JWT定义 JSON Web Token (JWT) 是一种开放的行业标准(RFC 7519),用于安全传送认证信息. 是目前流行的跨域认证的解决方案. 2> JWT数据结构 由三部 ...