echarts如何显示在页面上

1.引入echarts的相关.js文件

<script src="js/echarts.min.js"></script>

2.新建一个div，style自己定，但必须要有width和height

<div id="history_state" style="width: 400px;height: 200px"></div>

3.document.ready()中设置echarts的option

$(document).ready(function(e) {option = {tooltip : {trigger: 'axis',axisPointer : {            // 坐标轴指示器，坐标轴触发有效type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
             }},calculable : true,yAxis : [{type : 'value'}],xAxis : [{type : 'category',data : ['1','2','3','4','5','6','7','8','9','10','11','12']}],series : [{name:'直接访问',type:'bar',stack: '总量',itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},data:[320, 302, 301, 334, 390, 330, 320]},{name:'邮件营销',type:'bar',stack: '总量',itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},data:[120, 132, 101, 134, 90, 230, 210]}]};
　　　//获取echarts对象var history_state =  echarts.init(document.getElementById('history_state'));//设置option　　　history_state.setOption(option);});

这样就能显示了。

补充。。document.ready()方法是在dom加载完成，页面完全呈现后调用的。

转载于:https://www.cnblogs.com/EnzoDin/p/6445364.html

echarts如何显示在页面上相关推荐

将请求返回的图片转为Base64形式显示在页面上
情景: 如图该请求返回一张图片,我该如何显示在页面上呢? 代码如下: transformArrayBufferToBase64 (buffer) {var binary = '';var bytes ...
mysql 人名_jsp为什么按人名查询mysql结果不显示在页面上？可以
jsp为什么按人名查询mysql结果不显示在页面上?可以关注:213 答案:2 信息版本:手机版电脑版解决时间 2021-01-16 02:38 提问者这笑,有多危险 2021-01-15 ...
jsp图片上传提交前，图片显示在页面上
<divclass="upload_box"> <b>上传图片</b> <inputtype="file"name=& ...
javaweb网页上传图片并显示在页面上，并在服务端存到磁盘（base64编码解码）
最近做一个web项目用到上传图片,于是根据个人的知识及网上的搜集,将其总结于下: 上传图片时显示图片在页面 <input id="fileload" type=&quo ...
SSG框架Gatsby访问数据库，并显示到页面上
前言对于一些不长变的前端项目中,如个人博客.公司官网,可能技术选型为SSG框架会相对比之前的CSR会更好些,也会更快,最近研究了下Gatsby框架,感觉不错,就简单写了一个用其访问MySQL数据库, ...
使用 Hasor 从数据库查询显示到页面上
为什么80%的码农都做不了架构师?>>> 在 Hasor 的体系中开发 Web 应用程序需要至少 Hasor-Core.Hasor-Web 两个模块来共同完成.其中 Hasor ...
html中显示页面布局,如何让打开的网页显示在一个页面上
怎么把打开的网页并排显示在一个浏览器上打开IE网页中"工具",选择"Internet选项",里面有人选项卡,选择"设置",然后在选项,遇到 ...
前端连接后端,获取到数据库数据,通过ECharts图标展现在页面上
话不多说,直接上干货!!!! 一,首先在数据库创建表:如下二,搭建后端代码,通过localhost的方式,从数据库获取到这些数据. 2.1项目结构,见下图: 创建启动类,Controller,Ser ...
H5 画布解决跨域问题，画布保存为图片显示在页面上
实现功能:uniapp H5 使用画布,绘画完之后保存为图片全屏显示完整实现代码,跨域解决方案. 跨域图片解决方案一:(使用base64编码)网络图片放到画布里面绘画跨域图片解决方案二:(使用本地 ...

echarts如何显示在页面上

echarts如何显示在页面上相关推荐

最新文章

热门文章