ECharts DEMO

引入 ECharts

    

  1. <!DOCTYPE html>
    2. 

  2. <html>
    3. 

  3. <header>
    4. 

  4.     <meta charset="utf-8">
    5. 

  5.     <!-- 引入 ECharts 文件 -->
    6. 

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

  7. </header>
    8. 

  8. </html>
    9.

绘制一个简单的图表

在绘图前我们需要为 ECharts 准备一个具备高宽的 dom 容器。

    

  1. <body>
    2. 

  2.     <!-- 为 ECharts 准备一个具备大小（宽高）的Dom -->
    3. 

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

  4. </body>
    5.

然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图，下面是完整代码。

    

  1. <!DOCTYPE html>
    2. 

  2. <html>
    3. 

  3. <head>
    4. 

  4.     <meta charset="utf-8">
    5. 

  5.     <title>ECharts</title>
    6. 

  6.     <!-- 引入 echarts.js -->
    7. 

  7.     <script src="echarts.js"></script>
    8. 

  8. </head>
    9. 

  9. <body>
    10. 

  10.     <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    11. 

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

  12.     <script type="text/javascript">
    13. 

  13.         // 基于准备好的dom，初始化echarts实例
    14. 

  14.         var myChart = echarts.init(document.getElementById(‘main‘));
    15. 

    16. 

  16.         // 指定图表的配置项和数据
    17. 

  17.         var option = {
    18. 

  18.             title: {
    19. 

  19.                 text: ‘ECharts 入门示例‘
    20. 

  20.             },
    21. 

  21.             tooltip: {},
    22. 

  22.             legend: {
    23. 

  23.                 data:[‘销量‘]
    24. 

  24.             },
    25. 

  25.             xAxis: {
    26. 

  26.                 data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    27. 

  27.             },
    28. 

  28.             yAxis: {},
    29. 

  29.             series: [{
    30. 

  30.                 name: ‘销量‘,
    31. 

  31.                 type: ‘bar‘,
    32. 

  32.                 data: [5, 20, 36, 10, 10, 20]
    33. 

  33.             }]
    34. 

  34.         };
    35. 

    36. 

  36.         // 使用刚指定的配置项和数据显示图表。
    37. 

  37.         myChart.setOption(option);
    38. 

  38.     </script>
    39. 

  39. </body>
    40. 

  40. </html>
    41.

这样你的第一个图表就诞生了！

来自为知笔记(Wiz)

附件列表

时间： 2024-10-31 12:45:30

ECharts DEMO的相关文章

echarts HelloWord Demo

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getS

开源库Magicodes.ECharts使用教程

目录 1    概要    2 2    Magicodes.ECharts工作原理    3 2.1    架构说明    3 2.1.1    Axis    4 2.1.2    CommonDefinitions    4 2.1.3    Components    4 2.1.4    JsonConverter    4 2.2    Series    6 2.3    ValueTypes    6 2.4    EChartsOptions    7 2.5    Timel

Angular使用echarts

安装 npm install echarts --save npm install @types/echarts --save 基本使用 定义一个dom <div id="chart" style="min-width: 1500px;min-height:800px;"></div> 定义对象 //数据 eChartDatas: any; //图例 legends:any; //echart echarts: any; myChart: a

echarts2.*版本tree树图点击节点加载数据（或点击节点收缩）实现参考

自上一篇说明的点击节点更换节点图标后,发现网上有许多关于点击节点加载数据(或点击收缩节点)的问题,一直没看到满意的解答.现在在上一篇的基础上做出如下实现:点击节点动态加载/收缩子节点. 废话不多说,代码贴出来,简单易懂: <!DOCTYPE html> <html lang="en">   <head>     <meta charset="UTF-8">     <title>echarts demo&l

echarts2.* tree树形图节点点击事件和节点点击图标更改

做项目用到echarts2.2.7版本做树图,遇到点击树图节点更改样式,百度.谷歌搜索后均没找到解决方案.后来苦苦探索,终于找到解决入口,特地分享给大家以供参考,吐槽一下echarts的api真的没有highcharts人性化和易找.   //贴出关键点!     function clickFun(param) {         // console.log(param);         console.log(param);         param.data.symbol = 'im

vue-echarts-v3 使用 label显示格式

<template> <div class="echarts"> <IEcharts :option="pie" @ready="onReady" @click="onClick"></IEcharts> </div> </template> <script> import IEcharts from 'vue-echarts-v3/src/l

WEB前端工程师简历

一个热爱前端的工程师 关于我 我的作品 ZENRON 关于我 求职意向 作品集 技术掌握 我的经历 联系我 关于我 英语/CET-4 坐标/苏州 状态/求职 我叫Zenron, 现居住苏州, 是一名前端开发工程师: 一年以上前端开发经验,熟悉MV*开发, 深谙自动化, 模块化开发之道, 高效的自学能力, 具备独立分析解决问题能力! 求职意向 桌面端页面开发 响应页面,不冗余代码 css3流畅动画效果,兼容不同浏览器 移动端页面开发 移动端页面实现 兼容平板.安卓.IOS不同终端 交互功能开发 J

沫沫金Echarts移动端demo

鄙视百度!!! 官网给的Demo支持自动大小,确不给完整的源码XXX 自己动手,丰衣足食 http://echarts.baidu.com/demo.html#bar-tick-align 用最基本的柱状图官网代码 简单两步,实现移动端自适应大小 //1.下载Echarts <script src="dep/Echarts/echarts-all-3.js"></script> //2.chart容器宽度自适应 <!-- 为ECharts准备一个具备大小(

AngularJS引入Echarts的Demo

最近要用到图表展示,想了想,还是首选Echarts,HighCharts和D3.js备用吧, 而项目中也用到了AngularJS,所以需要把Echarts引入到AngularJs中一起使用, 试了试,最方便的还是用指令,(虽然指令有点不好调,用了再说). 1.引入angular.js 2.引入echarts.js 3.引入jquery.js---可以省略 4.直接上代码: 1 <!DOCTYPE html > 2 <head> 3 <meta charset="ut