Echarts数据可视化图表的简单配置

Echarts图表相关配置

先来看看一个例子的整体效果
下面是实现上方图示的相关配置

var option = {// 图表的标题title: {text: '一个简单的例子'},// 全局的颜色可以写在外面color: ['#3398DB'],// 配置图表的指示器tooltip: {trigger: 'axis',axisPointer: {type: 'shadow',shadowStyle: {// 配置指示器的背景颜色color: 'rgba(194, 211, 255, 0.3)'}},// 配置指示器的背景颜色backgroundColor: 'rgba(39, 71, 105, 0.7)'},// 配置图表距离容器上下左右四个方向的距离grid: {top: '3%',left: '1%',right: '3%',bottom: '1%',containLabel: true},// 图表X轴相关的配置xAxis: {type: 'category',data: ['6.01', '6.02', '6.03', '6.04', '6.05', '6.06', '6.07'],axisLine: {lineStyle: {color: 'rgba(209, 230, 249, 0.7)'}},axisLabel: {textStyle: { //改变刻度字体样式color: '#ccc',fontSize: 12}}},// 图表Y轴相关的配置yAxis: {type: 'value',axisLine: {show: false},axisLabel: {color: '#ccc',fontSize: 12},axisTick: {show: false},splitLine: {lineStyle: {color: ['rgba(22, 126, 226, 0.2)'],type: 'dashed'}}},// 系列列表的相关配置，通过type属性指定类型series: [{name: '生产时长',type: 'bar',barWidth: 12,data: [5, 3, 11, 4, 4, 11, 3],itemStyle: {normal: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[{offset: 0,color: '#00E3D2'},{offset: 0.5,color: '#A1F4EE'},{offset: 1,color: '#F8F8F8'},])}},}]}

接下来是一些具体的某些配置

配置图表的标题，可以隐藏掉

title: {show: false, // 隐藏标题text: '一个简单的例子'}

指示器的相关配置

tooltip: {trigger: 'axis',axisPointer: {type: 'shadow',shadowStyle: {// 配置指示器的阴影颜色color: 'rgba(194, 211, 255, 0.3)'}},// 配置指示器的背景颜色backgroundColor: 'rgba(39, 71, 105, 0.7)'}

图例的相关配置

legend: {// 取消图例的展示，当然在图表配置的整个过程中不写legend属性也是可以达到不显示图例的效果的show: false,// 图例的名字name: '生产时长'},

配置图表距离定义区域上、下、左、右各个方向的距离

 // 配置图表距离容器上下左右四个方向的距离grid: {top: '10%',left: '10%',right: '10%',bottom: '10%',// 这个开启则图表会等比例拉伸containLabel: true},

图表的系列相关配置，简单来说就是配置图表的类型

// 系列列表的相关配置，通过type属性指定类型series: [{// 柱状图type: 'bar',barWidth: 12,// 柱状图的数据展示data: [5, 3, 11, 4, 4, 11, 3],// 配置图表的风格itemStyle: {normal: {// 本例子配置的是一个柱状图 柱子的渐变色效果, 就如上面的效果图所示color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[{offset: 0,color: '#00E3D2'},{offset: 0.5,color: '#A1F4EE'},{offset: 1,color: '#F8F8F8'},])}},}]

注：

本例子相对较简单，想配置出更好的图表或符合自己需求的图表可以查看官方的教程和文档
这是链接：官方地址

Echarts数据可视化图表的简单配置相关推荐

java——插件echarts数据可视化图表库
插件echarts数据可视化图表库一.使用idea创建javaWeb工程二.下载echarts导入js文件三.使用echarts. 特别鸣谢:感谢林老师传授嘿嘿嘿 -------- 创作不易, ...
echarts 折线上写数值_前端ECharts数据可视化图表案例与介绍
什么是ECharts? ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Fire ...
echarts数据可视化图表（二）：双柱状图
echarts数据可视化图表(二):双柱状图效果图: html <script src="js/4.2.1/echarts.min.js"></script&g ...
数据分析可视化04 图表组件：Echarts数据可视化图表基础
本课时是课程的第二个模块,环境部署篇的第一个课时.在第一部分的基础理论篇,我向你介绍了数据可视化分析的概念定义.方法体系和关键技术.接下来,我会带你了解基于开源框架,如何部署数据可视化分析的开发环境, ...
layui导入模板数据_数据可视化图表教程echarts，第一讲
1 我们写web项目,展示数据的地方,可能会使用到图表.今天就讲这个玩意. 本教程暂时定为三讲:(随后情况,如果有新的研究,会有所更新!) 第一讲饼图的使用第二讲柱状图的使用第三讲拆 ...
echarts legend颜色_echarts数据可视化图表（二）：双柱状图
echarts数据可视化图表(二):双柱状图效果图: html js var loadEcharts09 = function () { var myChartss = echarts.init(d ...
数据可视化图表ECharts
介绍: ECharts是一个基于ZRender(轻量级Canvas类库)的纯javascript图表库,提供可交互.个性化的数据可视化图表. ECharts提供了折线图.柱状图.散点图.饼图.K线图, ...
Echarts数据可视化event图表事件的相关操作，开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
Echarts数据可视化action图表行为的相关操作，开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...

Echarts数据可视化图表的简单配置

Echarts图表相关配置

接下来是一些具体的某些配置

注：

Echarts数据可视化图表的简单配置相关推荐

最新文章

热门文章