银州手机网站建设,手机字体下载大全免费网站,工具站seo,googlechrome目录 #x1f31f;下载#x1f31f;浏览器引入#x1f31f;模块化引入 #x1f31f;使用#x1f31f;基本使用步骤 #x1f31f;绘制一个简单的图表#x1f31f;写在最后 #x1f31f;下载
#x1f31f;浏览器引入
官网下载界面#xff1a;官方网站 或 Echarts中文… 目录 下载浏览器引入模块化引入 使用基本使用步骤 绘制一个简单的图表写在最后 下载
浏览器引入
官网下载界面官方网站 或 Echarts中文社区 可自由选择下载不同版本、不同主题、所需地图数据根据需求进行个性化定制。刚开始学习和开发环境建议下载源代码版本因为该版本包含了常见的警告和错误提示。在线定制可以选择需要的图表、坐标系、组件、以及是否压缩等一些其他选项。 也可以通过cdn引入国内bootcdnhttps://www.bootcdn.cn/echarts/
script srchttps://cdn.bootcss.com/echarts/4.2.0-rc.2/echarts.min.js/script模块化引入
可以使用如下命令通过 npm 安装 ECharts
npm install echarts --save引入 ECharts
import * as echarts from echarts;按需引入 ECharts 图表和组件 默认使用 require(‘echarts’) 得到的是已经加载了所有图表和组件的 ECharts 包因此体积会比较大如果在项目中对体积要求比较苛刻也可以只按需引入需要的模块。 // 引入 echarts 核心模块核心模块提供了 echarts 使用必须要的接口。
import * as echarts from echarts/core;
// 引入柱状图图表图表后缀都为 Chart
import { BarChart } from echarts/charts;
// 引入提示框标题直角坐标系数据集内置数据转换器组件组件后缀都为 Component
import {TitleComponent,TooltipComponent,GridComponent,DatasetComponent,TransformComponent
} from echarts/components;
// 标签自动布局、全局过渡动画等特性
import { LabelLayout, UniversalTransition } from echarts/features;
// 引入 Canvas 渲染器注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from echarts/renderers;// 注册必须的组件
echarts.use([TitleComponent,TooltipComponent,GridComponent,DatasetComponent,TransformComponent,BarChart,LabelLayout,UniversalTransition,CanvasRenderer
]);// 接下来的使用就跟之前一样初始化图表设置配置项
var myChart echarts.init(document.getElementById(main));
myChart.setOption({// ...
});使用
Echarts这个框架的配置内容很是多所以不要尝试着把这个框架中的方法都给记住。Echarts的官方文档介绍十分详细所以使用的时候查看官方文档就可以 https://echarts.apache.org/zh/download.html
基本使用步骤
引入依赖JavaScript文件 首先将echarts.js引入,然后为echarts提供一个DOM容器
script srcecharts.js/script
div idchart stylewidth: 800px;height:400px;/div初始化echarts 基于准备好的dom初始化echarts
// 引入echarts.js后可获得全局 echarts 对象 即 window.echarts
// 初始化DOM容器用echarts.init()函数
var myChart echarts.init(document.getElementById(chart));设置图表的配置项和数据echarts的图形化呈现主要是通过配置方法来实现的(setOption),然后是对图形标签进行初始化最后把配置方法(setOption)赋值到初始化图形中。
//配置数据选项
var options{ title:{},//图表的标题
}
myChart.setOption(options);绘制一个简单的图表
按照上面的流程就可以实现一个简单的图表完整代码如下
!DOCTYPE html
htmlheadmeta charsetutf-8 /titleECharts/title!-- 引入刚刚下载的 ECharts 文件 --script srcecharts.js/script/headbody!-- 为 ECharts 准备一个定义了宽高的 DOM --div idmain stylewidth: 600px;height:400px;/divscript typetext/javascript// 基于准备好的dom初始化echarts实例var myChart echarts.init(document.getElementById(main));// 指定图表的配置项和数据var option {title: {text: ECharts 入门示例},tooltip: {},legend: {data: [销量]},xAxis: {data: [衬衫, 羊毛衫, 雪纺衫, 裤子, 高跟鞋, 袜子]},yAxis: {},series: [{name: 销量,type: bar,data: [5, 20, 36, 10, 10, 20]}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);/script/body
/html写在最后
更多前端知识请大家持续关注尽请期待。各位小伙伴让我们 let’s be prepared at all times ✨原创不易还希望各位大佬支持一下 点赞你的认可是我创作的动力 ⭐️ 收藏你的青睐是我努力的方向 ✏️ 评论你的意见是我进步的财富
