ECharts使用说明

1.引入echarts相关组件，在script标签下引入

 <script>------------此行不要复制// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。import * as echarts from 'echarts/core';// 引入饼图图表，图表后缀都为 Chartimport { PieChart } from 'echarts/charts';// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Componentimport {TitleComponent,TooltipComponent,GridComponent,DatasetComponent,TransformComponent} from 'echarts/components';// 标签自动布局，全局过渡动画等特性import { LabelLayout, UniversalTransition } from 'echarts/features';// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步import { CanvasRenderer } from 'echarts/renderers';

2.跟着官方文档来

注意事项：

1.在第一点中导入echarts的相关组件是放在script标签下

2.注册组件放在created中，初始化图表和配置项放在mounted中

**created:**在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。

**mounted:**在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。
created () {// 注册必须的组件echarts.use([TitleComponent,PieChart,TooltipComponent,GridComponent,DatasetComponent,TransformComponent,BarChart,LabelLayout,UniversalTransition,CanvasRenderer,]);},
mounted () {// 初始化图表，设置配置项var myChart = echarts.init(document.getElementById('main'));let option ={myChart.setOption(option);}

3.其他的参考echatsTest文档

通用配置组件（写在option里）

标题：title

提示工具：tooltip

工具按钮：toolbox

图例：legend

ECharts使用说明（开发小组内部参考）相关推荐

【GD32L233C-START】8、使用内部参考电压校准adc，adc采样更准确
1.为什么要校准因为MCU的VDD的电压会有微小的波动,并不是3.3v恒定的. 2.ADC与ADC通道可以看出GD32L233C-START开发板,也就是芯片GD32L233CCT6有一个ADC外 ...
开发小组共同使用协同文档
今天偶然看到"协同文档"这个词眼,一个项目开发小组对文档的共享和及时更新总是存在问题,以前总是用群发email的方式,但可想效果不是很好.存在的解决方法是使用版本控制软件,将文档加 ...
C/C++ 开发 boost 库参考手册整理（2）【学习笔记】
文档声明: 以下资料均属于本人在学习过程中产出的学习笔记,如果错误或者遗漏之处,请多多指正.并且该文档在后期会随着学习的深入不断补充完善.感谢各位的参考查看. 笔记资料仅供学习交流使用,转载请标明出处 ...
华一银行开发安全内部培训圆满结束
华一银行开发安全内部培训圆满结束华一银行于1997年1月获批准成立,同年6月正式对外营业,位于上海浦东陆家嘴金融中心,是中国第一家由海峡两岸合资的华人银行.合资方分别为莲花国际有限公司.永亨银行有限 ...
代码厨师软件开发小组团队介绍
软件开发小组代号: 代码厨师成员自我介绍: Leader : 郭立轩(@醉歌)91年生人,典型的工科男,无艺术细胞.喜欢编程,热爱技术,涉猎广泛,编码功底还需努力.希望在软件工程的课程学习中,学会团 ...
VB.NET开发人员必备参考10本书目
一.程序设计 1.<<Programming Microsoft Visual Basic .NET(Core Reference)>>(Visual Basic NET技术内 ...
编码5分钟，命名2小时？Java开发都需要参考的一份命名规范！
简洁清爽的代码风格应该是大多数工程师所期待的.在工作中笔者常常因为起名字而纠结,命名已经成为我工作中的拦路虎,夸张点可以说是编程5分钟,命名两小时! 每个公司都有不同的标准,目的是为了保持统一,减少沟 ...
java开发实战小参考常见问题及处理
1. 开发小参考施工中50% 2. 常见问题及处理施工中10% 1. 开发小参考宗旨: 使用合适的方法和思路,在适合的条件下,在合适的时间内,解决适合的问题.不定规则,只做思想和操作的分享和参考 ...
钉钉小程序开发 (企业内部应用)
是不是公司内部办公用钉钉的比较多? 哈哈,我现在的公司"是",所以开始了钉钉小程序的开发之路.先来展示一下钉钉官方的教程文档链接------( "钉钉小程序开发教程&qu ...

ECharts使用说明（开发小组内部参考）

ECharts使用说明

1.引入echarts相关组件，在script标签下引入

2.跟着官方文档来

注意事项：

3.其他的参考echatsTest文档

ECharts使用说明（开发小组内部参考）相关推荐

最新文章

热门文章