先看下效果图:

就如上图所示,都是些常用的基本配置。 Legend分页,X轴设置,Y轴设置,底部缩放条设置, 数值显示样式设置,工具箱设置,自定义工具按钮, 绑定点击事件等等。这些配置代码中都做了简单的注释。下面看下代码,代码总共分为了3个js文件,分别如下:

1.    option.js

let option = {

    // 标题配置
title: {
text: '这是一个演示用例',
textStyle: {
color: '#666', //标题字体颜色
fontSize: 18 //标题字体大小
},
show: true,
x: 'center' //水平居中
}, // 画布边距设置
grid: {
left: '5%',
right: '10%',
bottom: '15%',
containLabel: true
}, // 提示配置
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow' // 阴影模式
}
}, // 图例配置
legend: {
data: [
'出货量', '进货量', '售出量', '测试一', '测试二', '测试三', '测试四', '测试五', '测试六', '测试七',
'测试八', '测试九', '测试十', '复试一', '复试二', '复试三', '复试四', '复试五', '复试六', '复试七',
'复试八', '复试九', '复试十', '补位一', '补位二', '补位三', '补位四', '补位五', '补位六', '补位七'
],
selected: {
'出货量': true, '进货量': true, '售出量': true, '测试一': false, '测试二': false, '测试三': false,
'测试四': false, '测试五': true, '测试六': false, '测试七': false, '测试八': false, '测试九': false,
'测试十': false, '复试一': false, '复试二': true, '复试三': false, '复试四': false, '复试五': false,
'复试六': false, '复试七': false, '复试八': false, '复试九': false, '复试十': false, '补位一': false,
'补位二': false, '补位三': false, '补位四': false, '补位五': false, '补位六': false, '补位七': false
},
show: true,
type: 'scroll', //启用翻页模式
orient: 'vertical', //纵向显示
right: 15,
top: 45,
backgroundColor: '#eee',
padding: 10
}, // 工具箱配置
toolbox: {
feature: { // 自定义工具按钮,注:自定义按钮必须以 my 开头
myTool: {
show: true,
title: '自定义扩展方法',
icon: 'image://http://echarts.baidu.com/images/favicon.png', //注: image:// 这个是固定格式,后面跟图片地址
onclick: () => {
alert('您刚刚点击了自定义工具按钮!');
}
}, // 显示数据视图
dataView: { // 只读,注:只读模式下不会出现【刷新】按钮,只显示【关闭】按钮
readOnly: true, // 重写数据视图样式,改为表格(默认是一个多行文本框,即:<textarea>)
optionToContent: (opt) => {
let axisData = opt.xAxis[0].data,
series = opt.series,
html = '<table class="echarts-table"><thead><tr><th>系列/月份</th>'; // 表头
for(let th of axisData) {
html += `<th>${th}</th>`;
}
html += '</tr></thead><tbody>'; // 表体
for(let tr of series) {
html += `<tr><td>${tr.name}</td>`;
for(let td of tr.data) {
html += `<td>${td}</td>`;
}
html += '</tr>';
}
html += '</tbody></table>';
return html;
}
}, // 线形图和柱状图的切换
magicType: {
type: ['line', 'bar'],
title: {
line: '折线图',
bar: '柱状图',
}
}, restore: {}, // 还原
saveAsImage: {} // 保存为图片
}
}, // X轴配置
xAxis: {
name: '( 月份 )',
type: 'category',
axisLabel: {
rotate: 30 // X轴文字旋转角度
},
data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
}, // Y轴配置
yAxis: {
name: '( 这是Y轴名称:数值 )',
nameLocation: 'middle', // 居中
nameGap: 60, // 与轴线之间的间距
nameRotate: 90, // 字体旋转角度
type: 'value', // Y轴线条设置
axisLine: {
show: true,
lineStyle: {
type: 'solid'
}
}, // Y轴分割线设置
splitLine: {
show: true,
lineStyle: {
color: '#ddd',
type: 'solid'
}
}
}, // 底部缩放条配置
dataZoom: [{
type: 'slider',
start: 0,
end: 50,
bottom: 0,
show: true
}], // 系列数据配置
series: [{
name: '出货量',
data: [820, 932, 901, 934, 1290, 1330, 1320, 901, 934, 1290, 1330, 1320],
type: 'bar',
label: {
show: true
}
}, {
name: '进货量',
data: [820, 932, 901, 934, 1290, 1330, 1320, 901, 934, 1290, 1330, 1320],
type: 'line',
label: {
show: true
}
}, {
name: '售出量',
data: [820, 932, 901, 934, 1290, 1330, 1320, 901, 934, 1290, 1330, 1320],
type: 'bar',
label: {
show: true
}
}, {
name: '测试一',
data: [820, 932, 901, 934, 1290, 1330, 1320, 901, 934, 1290, 1330, 1320],
type: 'bar',
label: {
show: true
}
}, {
name: '测试二',
data: [820, 932, 901, 934, 1290, 1330, 1320, 901, 934, 1290, 1330, 1320],
type: 'bar',
label: {
show: true
}
}, {
name: '测试三',
data: [820, 932, 901, 934, 1290, 1330, 1320, 901, 934, 1290, 1330, 1320],
type: 'bar',
label: {
show: true
}
}, {
name: '测试四',
data: [820, 932, 901, 934, 1290, 1330, 1320, 901, 934, 1290, 1330, 1320],
type: 'bar',
label: {
show: true
}
}, {
name: '测试五',
data: [820, 932, 901, 934, 1290, 1330, 1320, 901, 934, 1290, 1330, 1320],
type: 'bar',
label: {
show: true
}
}, {
name: '测试六',
data: [820, 932, 901, 934, 1290, 1330, 1320, 901, 934, 1290, 1330, 1320],
type: 'bar',
label: {
show: true
}
}, {
name: '测试七',
data: [820, 932, 901, 934, 1290, 1330, 1320, 901, 934, 1290, 1330, 1320],
type: 'bar',
label: {
show: true
}
}, {
name: '测试八',
data: [820, 932, 901, 934, 1290, 1330, 1320, 901, 934, 1290, 1330, 1320],
type: 'bar',
label: {
show: true
}
}, {
name: '测试九',
data: [820, 932, 901, 934, 1290, 1330, 1320, 901, 934, 1290, 1330, 1320],
type: 'bar',
label: {
show: true
}
}, {
name: '测试十',
data: [820, 932, 901, 934, 1290, 1330, 1320, 901, 934, 1290, 1330, 1320],
type: 'bar',
label: {
show: true
}
}, {
name: '复试一',
data: [820, 932, 901, 934, 1290, 1330, 1320, 901, 934, 1290, 1330, 1320],
type: 'bar',
label: {
show: true
}
}, {
name: '复试二',
data: [820, 932, 901, 934, 1290, 1330, 1320, 901, 934, 1290, 1330, 1320],
type: 'bar',
label: {
show: true
}
}, {
name: '复试三',
data: [820, 932, 901, 934, 1290, 1330, 1320, 901, 934, 1290, 1330, 1320],
type: 'bar',
label: {
show: true
}
}, {
name: '复试四',
data: [820, 932, 901, 934, 1290, 1330, 1320, 901, 934, 1290, 1330, 1320],
type: 'bar',
label: {
show: true
}
}, {
name: '复试五',
data: [820, 932, 901, 934, 1290, 1330, 1320, 901, 934, 1290, 1330, 1320],
type: 'bar',
label: {
show: true
}
}, {
name: '复试六',
data: [820, 932, 901, 934, 1290, 1330, 1320, 901, 934, 1290, 1330, 1320],
type: 'bar',
label: {
show: true
}
}, {
name: '复试七',
data: [820, 932, 901, 934, 1290, 1330, 1320, 901, 934, 1290, 1330, 1320],
type: 'bar',
label: {
show: true
}
}, {
name: '复试八',
data: [820, 932, 901, 934, 1290, 1330, 1320, 901, 934, 1290, 1330, 1320],
type: 'bar',
label: {
show: true
}
}, {
name: '复试九',
data: [820, 932, 901, 934, 1290, 1330, 1320, 901, 934, 1290, 1330, 1320],
type: 'bar',
label: {
show: true
}
}, {
name: '复试十',
data: [820, 932, 901, 934, 1290, 1330, 1320, 901, 934, 1290, 1330, 1320],
type: 'bar',
label: {
show: true
}
}, {
name: '补位一',
data: [820, 932, 901, 934, 1290, 1330, 1320, 901, 934, 1290, 1330, 1320],
type: 'bar',
label: {
show: true
}
}, {
name: '补位二',
data: [820, 932, 901, 934, 1290, 1330, 1320, 901, 934, 1290, 1330, 1320],
type: 'bar',
label: {
show: true
}
}, {
name: '补位三',
data: [820, 932, 901, 934, 1290, 1330, 1320, 901, 934, 1290, 1330, 1320],
type: 'bar',
label: {
show: true
}
}, {
name: '补位四',
data: [820, 932, 901, 934, 1290, 1330, 1320, 901, 934, 1290, 1330, 1320],
type: 'bar',
label: {
show: true
}
}, {
name: '补位五',
data: [820, 932, 901, 934, 1290, 1330, 1320, 901, 934, 1290, 1330, 1320],
type: 'bar',
label: {
show: true
}
}, {
name: '补位六',
data: [820, 932, 901, 934, 1290, 1330, 1320, 901, 934, 1290, 1330, 1320],
type: 'bar',
label: {
show: true
}
}, {
name: '补位七',
data: [820, 932, 901, 934, 1290, 1330, 1320, 901, 934, 1290, 1330, 1320],
type: 'bar',
label: {
show: true
}
}]
}; export default option;

2.   demo.js

// 示例图-操作类
export default class Demo { // 构造函数
constructor(option, echarts) {
this.option = option;
this.echarts = echarts;
} // 初始化图表
init() {
this.echarts.setOption(this.option, true);
} // X轴坐标文字旋转角度
xTextRotate(deg) {
this.option.xAxis.axisLabel.rotate = parseInt(deg, 10);
this.init();
} // 系列数值的显示位置
seriesLabelPosition(position) {
let series = this.option.series;
let newSeries = series.map((item) => {
item.label.position = position;
return item;
});
this.option.series = newSeries;
this.init();
} // 系列数值是否显示
seriesLabelDisplay(mark) {
let series = this.option.series;
let newSeries = series.map((item) => {
item.label.show = mark;
return item;
});
this.option.series = newSeries;
this.init();
} // 系列数值 %
seriesLabelWithPercent(mark) {
let series = this.option.series;
let newSeries = series.map((item) => {
item.label.formatter = mark ? '{c}%' : '{c}';
return item;
});
this.option.series = newSeries;
this.init();
} // 系列数值旋转
seriesLabelRotate(deg) {
let series = this.option.series;
let newSeries = series.map((item) => {
item.label.rotate = parseInt(deg, 10);
return item;
});
this.option.series = newSeries;
this.init();
} // 底部拖动条是否显示
dataZoomDisplay(mark) {
if(mark) {
this.option.dataZoom[0].show = true;
this.option.dataZoom[0].end = 50;
} else {
this.option.dataZoom[0].show = false;
this.option.dataZoom[0].end = 100;
}
this.init();
} // 提示模式
tooltipModel(model) {
this.option.tooltip.axisPointer.type = model;
this.init();
} // Y轴线条
yLineStyle(style) {
if(style === 'none') {
this.option.yAxis.axisLine.show = false;
} else {
this.option.yAxis.axisLine.show = true;
this.option.yAxis.axisLine.lineStyle.type = style;
}
this.init();
} // Y轴分割线
ySplitLineStyle(style) {
if(style === 'none') {
this.option.yAxis.splitLine.show = false;
} else {
this.option.yAxis.splitLine.show = true;
this.option.yAxis.splitLine.lineStyle.type = style;
}
this.init();
} // 绑定事件
bindEvent(eventName, eventAction) {
this.echarts.on(eventName, eventAction);
} // 自适应调整
resize() {
this.echarts.resize();
}
}

3.   index.js

import echarts from 'echarts';
import option from './option';
import Demo from './demo'; // 根据id获取元素
let $ = id => document.getElementById(id); // 初始化图表
let demo = new Demo(option, echarts.init($('echarts')));
demo.init(); // 是否显示数值
$('sel1').addEventListener('change', (e) => {
demo.seriesLabelDisplay(e.target.value === '1');
}); // 数值显示位置
$('sel2').addEventListener('change', (e) => {
demo.seriesLabelPosition(e.target.value);
}); // 数值 %
$('sel3').addEventListener('change', (e) => {
demo.seriesLabelWithPercent(e.target.value === '1');
}); // X轴文字旋转角度
$('sel4').addEventListener('change', (e) => {
demo.xTextRotate(e.target.value);
}); // 底部拖动条是否显示
$('sel5').addEventListener('change', (e) => {
demo.dataZoomDisplay(e.target.value === '1');
}); // 设置提示模式
$('sel6').addEventListener('change', (e) => {
demo.tooltipModel(e.target.value);
}); // Y轴线条
$('sel7').addEventListener('change', (e) => {
demo.yLineStyle(e.target.value);
}); // 数值旋转
$('sel8').addEventListener('change', (e) => {
demo.seriesLabelRotate(e.target.value);
}); // Y轴分割线
$('sel9').addEventListener('change', (e) => {
demo.ySplitLineStyle(e.target.value);
}); // 绑定点击事件
demo.bindEvent('click', (param) => {
alert(`${param.name} - ${param.seriesName} - ${param.data}`);
}); // 浏览器窗口大小改变时,图表自适应
window.addEventListener('resize', () => { demo.resize(); });

option.js 是echarts的配置项,单独一个配置对象。 demo.js是一个类,里面定义了一些方法用来操作图表,改变图表的一些样式和 行为。 index.js是实际页面调用的js文件,它引入了option.js 和 demo.js。因为用了webpack 进行打包,打包后的文件名为bundle.js,所以index.html文件只引用了一个bundle.js文件。

index.html

<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Echarts图表示例</title>
<style>
.echarts {
width: 100%;
height: 700px;
margin-top: 50px;
padding-bottom: 10px;
}
.operate {
margin-top: 50px;
min-height: 100px;
background-color: #eee;
padding: 20px;
border: 1px solid #69a5e9;
}
select, button {
padding: 10px;
width: 180px;
margin: 5px 10px;
}
.echarts-table {
width: 100%;
border-collapse: collapse;
}
.echarts-table thead {
background-color: #eee;
}
.echarts-table th, .echarts-table td {
border: 1px solid #ddd;
text-align: center;
padding: 10px 0;
}
</style>
</head> <body>
<div id="echarts" class="echarts"></div>
<div class="operate">
<select name="sel1" id="sel1">
<option value="1">显示数值</option>
<option value="0">隐藏数值</option>
</select>
<select name="sel2" id="sel2">
<option value="inside">数值内部显示:居中</option>
<option value="insideBottom">数值内部显示:底部</option>
<option value="top">数值外部显示:顶部</option>
</select>
<select name="sel3" id="sel3">
<option value="0">数值隐藏 %</option>
<option value="1">数值添加 %</option>
</select>
<select name="sel4" id="sel4">
<option value="0">X轴文字旋转 00 度</option>
<option value="30" selected>X轴文字旋转 30 度</option>
<option value="60">X轴文字旋转 60 度</option>
<option value="90">X轴文字旋转 90 度</option>
</select>
<select name="sel5" id="sel5">
<option value="1">显示底部拖动条</option>
<option value="0">隐藏底部拖动条</option>
</select>
<select name="sel6" id="sel6">
<option value="shadow">tooltip:阴影模式</option>
<option value="line">tooltip:线条模式</option>
<option value="cross">tooltip:交叉模式</option>
</select>
<select name="sel7" id="sel7">
<option value="none">Y轴线条:隐藏</option>
<option value="solid" selected>Y轴线条:实线 solid</option>
<option value="dashed">Y轴线条:虚线 dashed</option>
<option value="dotted">Y轴线条:虚线 dotted</option>
</select>
<select name="sel8" id="sel8">
<option value="0">数值旋转 00 度</option>
<option value="30">数值旋转 30 度</option>
<option value="60">数值旋转 60 度</option>
<option value="90">数值旋转 90 度</option>
</select>
<select name="sel9" id="sel9">
<option value="none">Y轴分割线:隐藏</option>
<option value="solid" selected>Y轴分割线:实线 solid</option>
<option value="dashed">Y轴分割线:虚线 dashed</option>
<option value="dotted">Y轴分割线:虚线 dotted</option>
</select>
</div>
<script src="bundle.js"></script>
</body> </html>

以上就是所有的代码了,用的ES6的语法。echarts 工具箱 (toolbox) 中的数据视图按钮点击后出现的数据视图我嫌弃它太丑了,所以重新写了样式。默认情况下它是一个可编辑的多行文本框,在option.js中重新拼成了table。 效果如下图:

Echarts图表常用功能配置,Demo示例的更多相关文章

  1. Nginx常用功能配置二

    Nginx常用功能配置二 Nginx location匹配设置 location作用:可以根据用户请求的URI来执行不同的应用,根据用户请求的网站的地址URL匹配. location语法: locat ...

  2. Nginx常用功能配置一

    Nginx常用功能配置 参数include配置 说明:如果日常工作中server标签存在太多,可以采用include配置模式,Nginx的主配置文件包含的所有虚拟主机的子配置文件会统一放入extra目 ...

  3. ECharts图表——封装通用配置

    前言 前段时间在做大屏项目,大量用到echarts图表,大屏对设计规范要求比较高,而大屏项目,经常会因为业务方面的原因.或者是数据方面的原因改动UI设计,所有图表的代码也是三天一小改.五天一大改 因此 ...

  4. Apache运维中常用功能配置笔记梳理

    Apache 是一款使用量排名第一的 web 服务器,LAMP 中的 A 指的就是它.由于其开源.稳定.安全等特性而被广泛使用.下边记录了使用 Apache 以来经常用到的功能,做此梳理,作为日常运维 ...

  5. nginx常用功能配置

    一.规范优化nginx配置文件 nginx的主配置文件为nginx.conf,主配置文件包含的所有虚拟主机的子配置文件会统一放入extra目录中,虚拟主机的配置文件按照网站的域名或功能取名,例如www ...

  6. Echarts 图表的本地配置

    前言 Echarts是一个美观的可视化工具,但是很多朋友初次接触,不知道自己该怎么创建一个包含Echartst图表的本地HTML网页,本文将详细地介绍Echarts的使用流程. 使用流程步骤 共分为三 ...

  7. jsplumb 流程图,常用功能配置记录

    前言: jsplumb 有2个版本一个Toolkit Edition(付费版),另外一个就是Community Edition(社区版本).Toolkit Edition版本功能集成的比较丰富,社区版 ...

  8. 非常好用的弹出层 layer,常用功能demo,快速上手!

    功能强大,实用,操作方便,文档齐全. 参数灵活,丰富.可以作为开发项目的公共模块,多处使用.老文档地址:http://layer.layui.com/api.html 已经停止维护 新文档地址:htt ...

  9. Xamarin Studio在Mac环境下的配置和Xamarin.iOS常用控件的示例

    看过好多帖子都是Win环境装XS,Mac只是个模拟器,讲解在Mac环境下如何配置Xamarin Studio很少,也是一点点找资料,东拼西凑才把Xamarin Studio装在Mac上跑起来,如下: ...

随机推荐

  1. java项目打成jar包使用

    使用Eclipse打成jar包 1.创建项目hello 2.写java文件 package hell; import java.io.PrintStream; public class Hello { ...

  2. linux 下NFS远程目录挂载

    NFS 是Network File System的缩写,中文意思是网络文件系统.它的主要功能是通过网络(一般是局域网)让不同的主机系统之间可以共享文件或目录.NFS客户端(一般为应用服务器,例如web ...

  3. Python中的 // 与 / 的区别

    " / " 表示浮点数除法,返回浮点结果;" // " 表示整数除法,返回不大于结果的一个最大的整数 [code] print("6 // 4 = & ...

  4. 课程一(Neural Networks and Deep Learning),第二周(Basics of Neural Network programming)—— 0、学习目标

    1. Build a logistic regression model, structured as a shallow neural network2. Implement the main st ...

  5. Android_对android虚拟机的理解,包括内存管理机制垃圾回收机制。dalvik和art区别

    虚拟机很小,空间很小,谈谈移动设备的虚拟机的大小限制 16M ,谈谈加载图片的时候怎么处理大图片的,outmemoryExceptionBitmapFactory.option 垃圾回收,没有引用的对 ...

  6. sql字符处理

    --Description: 字符处理 --使用: 放到查询分析器里执行就可以了 --示例: select * from dbo.splitstr('12 44 45 50 56 87',' ') o ...

  7. jsp链接orcl

    自己整的!好用滴!!希望能帮到一些初学者! package lobsterwwww; import java.sql.Connection; import java.sql.DriverManager ...

  8. 轻量级web富文本框——wangEditor使用手册(5)——配置“插入代码”功能

    最新版wangEditor: demo.文档:http://www.wangEditor.github.io/ 下载地址:https://github.com/wangfupeng1988/wangE ...

  9. 自己实现IOC过程

    阅读了<架构探险>这本书之后简单梳理一下自己实现IOC的基本流程 首先要自己定义一个注解 import java.lang.annotation.ElementType; import j ...

  10. Python代码注释应该怎么写?

    https://zhuanlan.zhihu.com/p/22663276?refer=passer http://zh-google-styleguide.readthedocs.io/en/lat ...