目录
echarts%E6%9F%B1%E7%8A%B6%E7%BB%9F%E8%AE%A1%E5%9B%BE%C2%A0-toc" style="margin-left:80px;">一、简单的echarts柱状统计图
二、柱状图和折线图混搭
echarts%E7%94%BB%E5%9B%BE-toc" style="margin-left:80px;">三、一个项目里同时用不同版本的echarts画图
echarts%E6%9F%B1%E7%8A%B6%E7%BB%9F%E8%AE%A1%E5%9B%BE%C2%A0">一、简单的echarts柱状统计图
1、首先映入echarts所需的依赖包：echarts.js和echarts.min.js，以及jQuery.js；
echarts官网下载:https://echarts.baidu.com/download.html
jQuery官网下载：http://jquery.com/download/
2、源代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="echarts/4.2.1/echarts.js"></script>
<script type="text/javascript" src="echarts/4.2.1/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 900px;" class="chart-css" ref="myEchart"></div>
</body>
<script>
$(function () {
chart();
});
function chart() {
var menuList = ['小王', '小李', '小赵', '小马', '小刘', '小张', '小齐'];
var dataList = [3100, 2142, 1218, 581, 431, 383, 163];
var option = {
title: {
text: '常用报表统计',
},
tooltip: {
show: true,
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
fontSize: 8
}
},
legend: {
data: ['访问量']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,
// y2:140,
},
xAxis: {
name: '访问次数',
nameLocation: 'middle',// middle 居中显示 end 右边 start 左边
nameTextStyle:{
fontWeight:'bold',
fontSize:14,
padding: [10, 0, 0, 0]
},
type: 'value',
boundaryGap: [0, 0.01],
splitLine: { //网格样式
show: true,
lineStyle: {
color: ['#e7e8ec'],
width: 1,
type: 'solid'
}
}
},
yAxis: {
name: '名称',
nameLocation: 'start',
nameTextStyle:{
fontSize:14,
fontWeight:'bold'
},
type: 'category',
data: menuList,
inverse: true, //设置倒序排序
splitLine: { //网格样式
show: true,
lineStyle: {
color: ['#e7e8ec'],
width: 1,
type: 'solid'
}
},
axisLabel:{
interval:0,//Y轴信息全部显示
// rotate:-30,//-30度角倾斜显示
}
},
series: [{
name: '数量',
type: 'bar',
data: dataList,
barWidth: 30,
// barMaxWidth: 30,
itemStyle: {
normal: {
label: {
show: true,
position: 'right',
textStyle: {
color: 'black',
fontSize: 16
}
},
color: '#88CFFF'
}
}
}
]
};
// 设置容器的高度和宽度
var container = document.getElementById('main');
var allNode = menuList.length;
if(allNode < 3){
allNode = 3;
}else if(allNode < 5){
allNode = 5;
}
var currentHeight = 55 * allNode;
container.style.height = currentHeight + 'px'; //设置容器高度
var myChart = echarts.init(document.getElementById('main'));
window.onresize = function () {
myChart.resize();
}
myChart.setOption(option);
}
</script>
</html>3、关键代码解析：
3.1、坐标名称显示位置：设置nameLocation属性，middle 表示居中显示 、end表示右边显示、start表示左边显示；
注意：nameTextStyle的padding属性可以设置坐标名称的位置，经实验4.2.0以下版本不支持；
3.2、坐标轴名称显示：设置axisLabel属性的interval为0，表示Y轴信息全部显示，rotate为-30，表示-30度角倾斜显示；
3.3、数据排序方式：inverse为true表示以倒序的方式排序；
3.4、设置自适应容器高度：
var container = document.getElementById('main');
var allNode = menuList.length; // 获取显示数据的条数
var currentHeight = 55 * allNode;
container.style.height = currentHeight + 'px'; //设置容器高度
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);4、效果图：
二、柱状图和折线图混搭
此例子主要是让柱状图的零刻度线和折线图的零刻度保持一致，并且折线图有负数显示。主要是通过设置yAxis的最大值和最小值控制的。
注意：请使用4.0版本以上，4.0一下版本不支持。
1、代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>折线和柱状混搭</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>
</head>
<body>
<div id="mychart" style="width: 1000px;height: 500px"></div>
</body>
<script>
$(function () {
var myChart = echarts.init(document.getElementById("mychart"));
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
color: ['#5b9bd5','#ed7d31'],
legend: {
data:['降水量','平均温度']
},
xAxis: [
{
type: 'category',
data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
axisPointer: {
type: 'shadow'
}
}
],
yAxis: [
{
type: 'value',
name: '水量',
max: function(value) {
if(Math.abs(value.max) > Math.abs(value.min)){
return (Math.abs(value.max)).toFixed(2);
}else{
return (Math.abs(value.min)).toFixed(2);
}
},
min: function(value) {
if(Math.abs(value.max) > Math.abs(value.min)){
return (-Math.abs(value.max)).toFixed(2);
}else{
return (-Math.abs(value.min)).toFixed(2);
}
},
axisLabel: {
margin: 2,
formatter: function (value, index) {
if (value > 0) {
value = value + "ml";
} else {
value = "";
}
return value;
}
},
splitLine:{
lineStyle:{
color:'rgba(91,155,213,0.3)',
type:'solid'
}
}
},
{
type: 'value',
name: '温度',
max: function(value) {
if(Math.abs(value.max) > Math.abs(value.min)){
return (Math.abs(value.max)).toFixed(2);
}else{
return (Math.abs(value.min)).toFixed(2);
}
},
min: function(value) {
if(Math.abs(value.max) > Math.abs(value.min)){
return (-Math.abs(value.max)).toFixed(2);
}else{
return (-Math.abs(value.min)).toFixed(2);
}
},
axisLabel: {
formatter: '{value} °C'
},
splitLine:{
lineStyle:{
color:'rgba(237,125,49,0.3)',
type:'solid'
}
}
}
],
series: [
{
name:'降水量',
type:'bar',
data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
label: {
normal: {
show: true, //显示数字
position: 'top' //这里可以自己选择位置
}
}
},
{
name:'平均温度',
type:'line',
yAxisIndex: 1,
data:[2.0, -2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
label: {
normal: {
show: true, //显示数字
position: 'top' //这里可以自己选择位置
}
}
}
]
};
window.onresize = function () {
myChart.resize();
}
//加载图
myChart.setOption(option);
});
</script>
</html>2、效果图
echarts%E7%94%BB%E5%9B%BE">三、一个项目里同时用不同版本的echarts画图
1、 需求：在项目中需要用到echarts新版本的功能，但是发现项目中一直用的是老版本的echarts，假如直接升级echarts版本就会影响之前echarts图的一下功能；
2、实现：下载新版本的echarts同时在项目中引入进来，再修改新版本的echarts.js文件，把echarts.js文件中所有的‘echarts’改成‘echarts4’（如果你下载的是echarts.4.0.x 的版本就改成‘echarts4’；如果是echarts.5.0.x 或其他的，就改成 ‘echarts5’或 其他的）；
3、 用法：
var myChart = echarts4.init(document.getElementById("mychart"));4、具体场景：
4.1、项目中在同一页面同时显示一个柱状图和折线图混搭的图表，并且柱状 图只有正数，而折线图有负数，客户要求柱状图和折线图的零刻度线保持一致（4.0版本一下的无法实现）。
4.2、在柱状图和折线图混搭的图表的同一页面显示一个雷达图，需要显示默认数值，用的的是radar属性：axisLabel.show 属性4.0以上版本不支持，并且会报错无法加载图表，错误信息：Uncaught TypeError: e.getCategories is not a function 。只能用4.0一下的版本（用不同的版本实现）。
radar: {
indicator: [
{
text: '销售',
axisLabel: {
show: true, // 此属性不支持，会报错
textStyle: {
fontSize: 18,
color: '#333'
}
},
max: 6500
},
{
text: '管理',
max: 16000
}
]
}
5、最终效果如下
