Echarts五步法加初体验

使用步骤：

引入echarts 插件文件到html页面中
准备一个具备大小的DOM容器

<div id="main" style="width: 600px;height:400px;"></div>

初始化echarts实例对象

var myChart = echarts.init(document.getElementById('main'));

指定配置项和数据(option)

var option = {    xAxis: {        type: 'category',        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']    },    yAxis: {        type: 'value'    },    series: [{        data: [820, 932, 901, 934, 1290, 1330, 1320],        type: 'line'    }]};

将配置项设置给echarts实例对象

myChart.setOption(option);

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.box {width: 300px;height: 300px;background-color: pink;}</style></head><body><div class="box"></div><script src="js/echarts.min.js"></script><script>// 初始化实例对象  echarts.init(dom容器);var myChart = echarts.init(document.querySelector(".box"));// 指定配置项和数据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>

Echarts五步法加初体验相关推荐

【前端大屏实战1】Vue+Echarts -- 大屏简介初体验 =＞大屏自适应缩放解决方案 =＞使用transform:scale =＞组件化抽离ScaleBox=＞【两分钟实现大屏宽高等比例】
如果累了就冬眠吧,如果睡不着,就接纳暂时的失眠,不强迫自己入睡. 目录一.大屏简介 1.数据可视化 2.大屏用途 3.大屏效果展示二.大屏需求分类 1.固定尺寸的"真实"大屏 ...
Echarts GL 3d地图初体验，浙江天地图作为底图mapbox
网上看到一张图效果非常好,斜45度角模式的3d地图,用在大屏模式上非常有科技感,高端大气上档次. 于是,研究了下怎么做,发现Echarts GL能做出相似的描边3D效果,地图可以加载浙江天地图(如下图 ...
taro 重新加载小程序_Taro开发微信小程序的初体验
了解Taro 听说Taro是从几个星期前开始的,在一次饭桌上,一个小伙伴说:"Hey, 你听说了Taro么,听说只需要写一套程序就可以生成H5,小程序以及RN的代码模板,并且类似于React ...
shell 清楚空格_Cygwin系列（五）：Shell命令行初体验
► 本文共5700余字,预计阅读时间15分钟,本文知乎链接:Cygwin系列(五):Shell命令行初体验,本文同步发布于微信公众号. 前一篇文章Cygwin系列(四):一步一步搭建Cygwin最小系 ...
【虚幻引擎UE】UE5 AR初体验之静态动态模型加载
UE5的AR初体验之静态动态两种模型加载基于配置好AR环境(参考另一篇文章) 先## 标题简单了解一下它的项目结构这里的brush就是我们的操作空间范围官方模板可以实现平面识别,控制对象的旋转和 ...
一加6升级android p,一加6手机升级Android P初体验：系统更智能、操作更流畅！
原标题:一加6手机升级Android P初体验:系统更智能.操作更流畅! 8月7日谷歌发布正式版Android P后,8月15日一加手机领先业界最先放出了一加6的Android P公测版.当然,这极其 ...
PCB 机器学习(ML.NET)初体验实现PCB加投率预测
使用ML.NET建立PCB加投率模型对单一蚀刻工序进行加投率预测, 此实例为最简单预测,要想实现全流程加投率预测挑战难度还是挺大的,可以查看另一种关于大数据在PCB行业应用---加投率计算基本原理:P ...
在一个html加载多个echarts,Echarts一个页面加载多个图表及图表自适应
Echarts一个页面加载多个图表及图表自适应模块化加载 //入口 require.config({ paths: { echarts: 'http://echarts.baidu.com/buil ...
决胜B端第2版（4）：需求分析的十三要素五步法
本文由作者杨堃发布于社区需求挖掘和分析是产品设计中挑战最大的工作之一,如何洞察需求的本质,识别出真实的意图,并通过优雅的产品设计,解决需求背后的痛点,是所有产品经理都应该持续提升的核心能力. 需 ...

Echarts五步法加初体验

Echarts五步法加初体验相关推荐

最新文章

热门文章