0.前言
ECharts 是一款由百度前端技术部开发的，基于 Javascript 的数据可视化图表库。由于功能强大，文档和示例也做得很好，适合快速构建图表原型以应用于产品。
1.下载Echarts.js百度搜索echarts进官网，点击菜单栏的下载，然后根据需要进行下载。
下载页： https://www.echartsjs.com/download.html
我一般选在线定制，然后勾选自己需要的组件来生成js文件就行了。
先上效果参考图：
（代码基于Echarts4，用到了dataset，旧版本的话参考下就行了，并且我没用到里面的图例图题等东西。另外，参考里那个博客写的挺详细的）
本文代码链接：https://github.com/gongjianbo/LearnECharts/tree/master/echarts_bar
ECharts Bar
html,
body,
#echarts {
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
}
/*隐藏滚动条*/
html {
overflow-x: hidden;
overflow-y: hidden;
}
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 =
'';
return params[0].data.type + " " +
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
}]
});
};
官方示例：https://www.echartsjs.com/examples/
官方文档：https://www.echartsjs.com/api.html#echarts
博客参数说明：Echarts数据可视化grid直角坐标系（xAxis、yAxis），开发全解+完美注释_全栈工程师开发手册（原创）(腾讯内推)-CSDN博客_echarts直角坐标系
博客dataset：Echarts 定制化封装之dataset - wlc534的个人空间 - OSCHINA - 中文开源技术交流社区
