Echarts 是一个纯 Javascript 的开源可视化图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 Canvas 类库 ZRender，提供直观，生动，可交互，可个性化定制的数据可视化图表。
总结一些常用的图表：
1. 折线图
image.png
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
color: '#57617B',
},
},
},
legend: {
data: ['预算金额', '执行金额', '开支金额'],
top: '0',
textStyle: {
color: '#fff',
},
itemGap: 20,
},
grid: {
left: '0',
right: '20',
top: '30',
bottom: '20',
containLabel: true,
},
xAxis: [
{
type: 'category',
boundaryGap: false,
axisLabel: {
show: true,
color: 'rgba(255,255,255,.6)',
},
axisLine: {
lineStyle: {
color: 'rgba(255,255,255,.1)',
},
},
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
},
{},
],
yAxis: [
{
name: '金额',
axisLabel: {
show: true,
color: 'rgba(255,255,255,.6)',
formatter: function (value) {
if (value == 0) {
return '0万';
} else {
return value + '万';
}
},
},
axisLine: {
lineStyle: {
color: 'rgba(255,255,255,.1)',
},
},
splitLine: {
lineStyle: {
color: 'rgba(255,255,255,.1)',
},
},
},
],
series: [
{
name: '预算金额',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 5,
showSymbol: false,
lineStyle: {
width: 2,
},
areaStyle: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: 'rgba(24, 163, 64, 0.3)',
},
{
offset: 0.8,
color: 'rgba(24, 163, 64, 0)',
},
],
false,
),
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10,
},
itemStyle: {
color: '#49bcf7',
borderColor: 'rgba(137,189,2,0.27)',
borderWidth: 12,
},
data: [20, 82, 11, 14, 10, 12, 10, 25, 15, 12, 16, 22], // executionAmount
},
{
name: '执行金额',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 5,
showSymbol: false,
lineStyle: {
width: 2,
},
areaStyle: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: 'rgba(24, 163, 64, 0.3)',
},
{
offset: 0.8,
color: 'rgba(24, 163, 64, 0)',
},
],
false,
),
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10,
},
itemStyle: {
color: '#cdba00',
borderColor: 'rgba(137,189,2,0.27)',
borderWidth: 12,
},
data: [20, 12, 11, 14, 15, 10, 10, 25, 45, 22, 65, 122], // executionAmount
},
{
name: '开支金额',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 5,
showSymbol: false,
lineStyle: {
width: 2,
},
areaStyle: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: 'rgba(39, 122,206, 0.3)',
},
{
offset: 0.8,
color: 'rgba(39, 122,206, 0)',
},
],
false,
),
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10,
},
itemStyle: {
color: '#d0648a',
borderColor: 'rgba(0,136,212,0.2)',
borderWidth: 12,
},
data: [22, 18, 12, 14, 12,19, 14, 15, 10, 11, 15, 12],
},
],
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
2. 柱状图
image-1.png
option = {
tooltip: {
trigger: "axis",
axisPointer: {
lineStyle: {
color: "#57617B",
},
},
},
legend: {
data: [{ name: "预算执行率" }, { name: "实际执行率" }, { name: "账面开支率" }],
top: "0%",
textStyle: {
color: "rgba(255,255,255,0.9)", //图例文字
},
},
xAxis: [
{
type: "category",
data: ['研发部', '综合部', '科研部', '行政部', '教务部', '财会部', '监察部', '劳动部', '商务部'],
axisLine: { lineStyle: { color: "rgba(255,255,255,.1)" } },
axisLabel: {
textStyle: { color: "rgba(255,255,255,.6)", fontSize: "14" },
},
},
],
yAxis: [
{
type: "value",
name: "执行率",
max: 100,
axisLabel: {
show: true,
formatter: "{value} %",
},
axisLine: { lineStyle: { color: "rgba(255,255,255,.6)" } }, //左线色
splitLine: { show: true, lineStyle: { color: "#475877" } },
data: [0, 20, 40, 60, 80, 100],
},
],
grid: {
top: "12%",
right: "50",
bottom: "30",
left: "50",
},
series: [
{
name: "预算执行率",
type: "bar",
data: [65.26,54.0,65.2,65.2,89.55,78.25,45.26,65.2,65.2],
barWidth: "auto",
itemStyle: {
normal: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "#49bcf7",
},
{
offset: 1,
color: "#49bcf7",
},
],
globalCoord: false,
},
},
},
},
{
name: "实际执行率",
type: "bar",
data: [65.26,54.0,65.2,65.2,89.55,78.25,45.26,65.2,65.2],
barWidth: "auto",
itemStyle: {
normal: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "#cdba00",
},
{
offset: 1,
color: "#cdba00",
},
],
globalCoord: false,
},
},
},
barGap: "0",
},
{
name: "账面开支率",
type: "bar",
data: [65.26,54.0,65.2,65.2,89.55,78.25,45.26,65.2,65.2],
barWidth: "auto",
itemStyle: {
normal: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "#d0648a",
},
{
offset: 1,
color: "#d0648a",
},
],
globalCoord: false,
},
},
},
barGap: "0",
},
],
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
image-3.png
option = {
tooltip: {
show: false,
},
grid: {
top: "0%",
left: "60",
right: "70",
bottom: "0%",
},
xAxis: {
min: 0,
max: 100,
splitLine: {
show: false,
},
axisTick: {
show: false,
},
axisLine: {
show: false,
},
axisLabel: {
show: false,
},
},
yAxis: {
data: ['研发部', '综合部', '科研部', '行政部', '教务部', '财会部', '监察部', '劳动部', '商务部'],
axisTick: {
show: false,
},
axisLine: {
show: false,
},
axisLabel: {
color: "rgba(255,255,255,.6)",
fontSize: 14,
},
},
series: [
{
type: "bar",
label: {
show: true,
zlevel: 10000,
position: "right",
padding: 10,
color: "#49bcf7",
fontSize: 14,
formatter: "{c}%",
},
itemStyle: {
color: "#49bcf7",
barBorderRadius: [60, 60, 60, 60],
},
barWidth: "15",
data: [33.65, 54.0, 65.2, 65.2, 89.55, 78.25, 45.26, 65.2, 65.2],
z: 10,
},
{
type: "bar",
barGap: "-100%",
itemStyle: {
color: "#fff",
opacity: 0.1,
barBorderRadius: [60, 60, 60, 60],
},
barWidth: "15",
data: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100],
z: 5,
},
],
};
// 百分比显示在最右边
setTimeout(function () {
var width = myChart.getWidth();
var opt = myChart.getOption();
var grid = opt.grid[0];
var right = grid.right;
var left = grid.left;
var x = width - left - right;
myChart.setOption({
series: [
{
label: {
show: true,
position: "left",
offset: [x + 80, 0],
},
},
],
});
});
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
3. 饼图
image-2.png
option = {
tooltip: {
trigger: "item",
formatter: "{b} : {c} ({d}%)",
},
legend: {
right: 0,
top: 30,
itemHeight: 10,
itemGap: 10,
orient: "vertical",
selectedMode: false, //取消图例上的点击事件
textStyle: {
color: "rgba(255,255,255,.6)",
fontSize: 12,
},
data: ['研发部', '综合部', '科研部', '行政部', '教务部', '财会部', '监察部', '劳动部', '商务部'],
},
series: [
{
name: " ",
color: ["#62c98d", "#2f89cf", "#4cb9cf", "#53b666", "#62c98d", "#205acf", "#c9c862", "#c98b62", "#c962b9", "#7562c9", "#c96262", "#c25775", "#00b7be"],
type: "pie",
radius: [40, 70],
center: ["35%", "52%"],
avoidLabelOverlap: true,
animation: false,
hoverAnimation: false,
label: {
show: false,
normal: {
show: true,
},
emphasis: {
show: true,
},
},
lableLine: {
normal: {
show: true,
},
emphasis: {
show: true,
},
},
data: [
{"name": "研发部","value": "1040000.00"},
{"name": "科研部", "value": "40000.00"},
{"name": "综合部","value": "30000.00"},
{"name": "行政部","value": "30000.00"},
{"name": "教务部","value": "30000.00"},
{"name": "财会部","value": "30000.00"},
{"name": "劳动部","value": "30000.00"},
{"name": "商务部","value": "20000.00"},
{"name": "监察部","value": "10000.00"}
]
},
],
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
仪表盘
一个圆圈表示100%，男生消费和女生消费的占比。
image-4.png
var v1 = 65 //女消费
var v2 = 35 //男消费
var v3 = 100 //总预算
option = {
//animation: false,
series: [
{
type: "pie",
radius: ["60%", "70%"],
color: "#cdba00",
label: {
normal: {
position: "center",
},
},
data: [
{
value: v1,
name: "男消费",
label: {
normal: {
formatter: v1 + "",
textStyle: {
fontSize: 20,
color: "#fff",
},
},
},
},
{
value: v2,
name: "女消费",
label: {
normal: {
formatter: function (params) {
return "占比" + 1 + "%";
},
textStyle: {
color: "#aaa",
fontSize: 12,
},
},
},
itemStyle: {
normal: {
color: "rgba(255,255,255,.2)",
},
emphasis: {
color: "#fff",
},
},
},
],
},
],
};
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
以上就是今天所有的echarts的内容，希望对大家有所帮助。
