Echarts入门教程、使用总结（一）

￡神魔★判官ぃ 2022-06-13 09:27 445阅读 0赞

最近公司在做一个mes项目需要用到图表来做一个看板

在echarts和highcharts中我选择了echarts   他们的关系就像是wps和office的区别吧  但是echarts在近年来做的越来与好了

在其中遇到一些小问题 写下来以便于以后使用

#  #

# 1.toolbox不显示，  calculable : true功能没用 #

在刚开始熟悉这个插件时，打算从实例出发  发现做出来的效果总是与实例不同 缺少toolbox， calculable : true功能没用

这都是因为下载的js文件为echarts3.0的  而实例使用的是echarts2.0版本导致的,再改为echarts2.0.js后  实现了所有功能

# 2.div布局问题 #

在看板中会有许多的表格这就要求div布局使其位置自动并排  div默认属性是自动换行的

div{
         float:left
    }

这样使得div自动靠左

需要换行时  可以加<br/>

# 3.echarts表格加载 #

在option中设置好echarts所需的属性，下载要加载的主题js文件复制到工程中     以下customed为主题名称

var myChart2 = echarts.init(document.getElementById('right'),'customed');

# 4.echarts自定义主题 #

因为项目需要以黑底白字的形式展现表格  所以官方提供的主题不足以满足以下条件

在echarts3.0中   提供了自定义主题的功能  [点击打开链接][Link 1]  在里面可以修改各种样式颜色以满足各种需要

**这是项目使用的主题  [自定义黑白主题][Link 2]**

# 5.项目结构优化 #

在加载一系列表格之后，整个html文件布局显得十分混乱

可以将div布局单独放在html文件中   options的设置封装为函数在其他js文件中  进行对应的调用

# ![Center][]![Center 1][] #

# ![Center 2][] #

[Link 1]: http://echarts.baidu.com/theme-builder/
[Link 2]: http://download.csdn.net/detail/sinat_29774479/9887959
[Center]: https://img-blog.csdn.net/20170704153551060?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc2luYXRfMjk3NzQ0Nzk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 1]: /images/20220613/9ed8b4bbf5a646babf8db4b1a99e895d.png
[Center 2]: /images/20220613/37c06338b61b4670a45cfd0e7ad41e6f.png

发表评论取消回复

表情：

评论列表（有 0 条评论，445人围观）

还没有评论，来说两句吧...

相关阅读

相关 ECharts快速入门教程

> Apache ECharts（incubating）是一款由百度开源的基于JavaScript的开源可视化图表库。它提供了丰富的图表类型，包括折线图、柱状图、散点图、饼图、

待我称王封你为后i/ 2023年10月12日 09:23/ 0 赞/ 57 阅读

相关 echarts中graphic_ECharts的使用与总结

ECharts的使用与总结一,介绍与需求 1.1,介绍 ECharts商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大

清疚/ 2022年12月31日 11:22/ 0 赞/ 200 阅读

相关 echarts图使用的总结

1 整个echarts图的大小及位置 grid: { x: "12%",//x 偏移量 y: "18%", // y 偏移量

淡淡的烟草味﹌/ 2022年12月26日 04:58/ 0 赞/ 192 阅读

相关 Echarts入门教程、使用总结（二）

1.设置图表标题字体大小，居中显示 title : { text : '年、月、周、日生产进仓数（日均，60"切换）', text

心已赠人/ 2022年06月13日 10:53/ 0 赞/ 232 阅读

相关 Echarts入门教程、使用总结（一）

最近公司在做一个mes项目需要用到图表来做一个看板在echarts和highcharts中我选择了echarts 他们的关系就像是wps和office的区别吧但是e

￡神魔★判官ぃ/ 2022年06月13日 09:27/ 0 赞/ 446 阅读

相关 Echarts 图表使用（一）

折线图和柱状图对比通过点击Echart 图表右上角的色块可以控制对应图表的显隐。但在多条柱状图中，对应的图形复杂（可以调整柱状图之间的距离解决），不符合图表直观清晰

傷城~/ 2022年05月27日 09:18/ 0 赞/ 339 阅读

相关使用echarts的一点总结

首先要下载最新echarts，旧版可能很多功能不支持 1.饼图中心写文字 ![70][] var myChart = echarts.init(docum

川长思鸟来/ 2022年05月12日 13:06/ 0 赞/ 257 阅读

相关 GitHub使用教程（一）快速入门

一、前言现在大多数开发者都有自己的GitHub账号，很多公司也会以是否有GitHub作为一项筛选简历以及人才的选项了，可见拥有一个GitHub账号的重要性，本文就从最基

太过爱你忘了你带给我的痛/ 2022年03月24日 15:12/ 0 赞/ 431 阅读

相关 echarts图标使用（一）

var data = []; // Parametric curve // for (var t = 0; t < 25; t += 0.001) {

矫情吗；*/ 2021年11月26日 11:46/ 0 赞/ 386 阅读

相关 ECharts.js学习（一）简单入门

EChart.js 简单入门最近有一个统计的项目要做，在前端的数据需要用图表的形式展示。网上搜索了一下，发现有几种统计图库。 MSChart 这个是Visual

傷城~/ 2021年09月15日 03:22/ 0 赞/ 392 阅读