0.前言
ECharts 是一款由百度前端技术部开发的,基于 Javascript 的数据可视化图表库。由于功能强大,文档和示例也做得很好,适合快速构建图表原型以应用于产品。
1.下载Echarts.js
百度搜索echarts进官网,点击菜单栏的下载,然后根据需要进行下载。
下载页: https://www.echartsjs.com/download.html
我一般选在线定制,然后勾选自己需要的组件来生成js文件就行了。
2.柱状图自定义
先上效果参考图:
(代码基于Echarts4,用到了dataset,旧版本的话参考下就行了,并且我没用到里面的图例图题等东西。另外,参考里那个博客写的挺详细的)
本文代码链接:https://github.com/gongjianbo/LearnECharts/tree/master/echarts_bar
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts Bar</title>
<style>
html,
body,
#echarts {
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
}
/*隐藏滚动条*/
html {
overflow-x: hidden;
overflow-y: hidden;
}
</style>
</head>
<body>
<!-- 一般是一个具有高宽的div元素 -->
<div id="echarts"></div>
<!-- ECharts文件引入 -->
<script src="echarts.js"></script>
<script type="text/javascript">
var worldMapContainer = document.getElementById('echarts');
//窗体自适应
var resizeWorldMapContainer = function () {
worldMapContainer.style.width = window.innerWidth + 'px';
worldMapContainer.style.height = window.innerHeight + 'px';
};
resizeWorldMapContainer();
window.onresize = function () {
resizeWorldMapContainer();
myChart.resize();
};
//这里创建一个ECharts实例,返回 echartsInstance,不能在单个容器上初始化多个 ECharts 实例。
//通过init设置图表实例的配置项以及数据,万能接口,所有参数和数据的修改都可以通过 setOption 完成,
//ECharts 会合并新的参数和数据,然后刷新图表。
//如果开启动画的话,ECharts 找到两组数据之间的差异然后通过合适的动画去表现数据的变化。
var myChart = echarts.init(worldMapContainer);
//这里用一个列表来放渐变色
var colorList = [
//四个值分别代表右下左上,有数值是起点,一般写1方便计算
//offset取值[0,1],径向路径起点到终点的位置
//从上到下
new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: "#FF0000"
},
{
offset: 1,
color: "#FFFF00"
}
]),
//从左到右
new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: "#00FF00"
},
{
offset: 1,
color: "#00FFFF"
}
]),
//右上到左下
new echarts.graphic.LinearGradient(1, 0, 0, 1, [{
offset: 0,
color: "#FF0000"
},
{
offset: 0.5,
color: "#00FF00"
},
{
offset: 1,
color: "#0000FF"
}
])
];
//小圆点颜色列表
var pointColorList = ['red', 'green', 'blue'];
// 初始化设置
myChart.setOption({
//提示框
tooltip: {
//触发方式可以是坐标轴'axis',数据项'item'
trigger: 'axis',
// 坐标轴指示器
axisPointer: {
// 默认为直线'line',可选为阴影'shadow'
type: 'shadow'
},
//提示内容的回调函数
formatter: function (params) {
//嵌入html的方式自定义小圆点
var dot =
'<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' +
pointColorList[params[0].dataIndex] + ';"></span>';
return params[0].data.type + "<br/> " +
dot + " total:" + params[0].data.total
}
},
//网格
grid: {
//grid外的占比
left: '1%',
right: '1%',
top: '3%',
bottom: '3%',
//grid 区域是否包含坐标轴的刻度标签
containLabel: true
},
xAxis: {
type: 'category',
//可以指定参数的顺序,但是不会改变params[0].dataIndex顺序
//data: ['总数', '在线', '离线'],
//刻度label
axisLabel: {
textStyle: {
color: '#c9c9ca'
}
},
//刻度线
axisLine: {
lineStyle: {
color: '#c9c9ca',
width: 1
}
},
//坐标刻度相关
axisTick: {
//刻度线和标签对齐
alignWithLabel: true
}
//设置字体倾斜
/*axisLabel: {
interval: 0,
rotate: 45,
margin: 2,
textStyle: {
color: '#c9c9ca',
fontSize: '9',
fontFamily: 'PingFang-Sc-Heavy',
}
}*/
},
yAxis: {
//坐标轴在 grid 区域中的分隔线
splitLine: {
show: true
},
type: 'value',
axisLabel: {
textStyle: {
color: '#c9c9ca'
}
},
axisLine: {
lineStyle: {
color: '#c9c9ca',
width: 1
}
}
},
//数据展示
series: [{
//柱状图
type: 'bar',
//柱子宽度在item宽度的占比
barWidth: "45%",
itemStyle: {
normal: {
//柱子颜色
color: function (params) {
return colorList[params.dataIndex];
}
}
},
//柱子上的label
label: {
normal: {
show: true,
position: 'insideTop',
formatter: function (params) {
return params.data.size
}
}
},
//重新映射x轴和y轴的数据
encode: {
x: ['type'],
y: ['total']
}
}],
//ECharts 4 开始支持了 dataset 组件用于单独的数据集声明,
//从而数据可以单独管理,被多个组件复用,并且可以基于数据指定数据到视觉的映射。
dataset: {
//临时用的数据
source: [{
"type": "在线",
"total": 10,
"size": 20
}, {
"type": "离线",
"total": 10,
"size": 20
}, {
"type": "总数",
"total": 20,
"size": 40
}]
}
});
//将json数组作为参数进行动态设置
function setChartData(jsonarray) {
//alert(jsonarray)
myChart.setOption({ //加载数据图表
dataset: [{
source: jsonarray
}]
});
};
</script>
</body>
3.参考
官方示例:https://www.echartsjs.com/examples/
官方文档:https://www.echartsjs.com/api.html#echarts
博客参数说明:Echarts数据可视化grid直角坐标系(xAxis、yAxis),开发全解+完美注释_全栈工程师开发手册(原创)(腾讯内推)-CSDN博客_echarts直角坐标系
博客dataset:Echarts 定制化封装之dataset – wlc534的个人空间 – OSCHINA – 中文开源技术交流社区