1.在官网上下载echarts并引入项目中

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

2.给一个DOM作为图表展示的容器,必须有width和height,且这两项必须写在DOM里。

<div class="container" id="main" style="width: 1000px;height: 1000px">

3.初始化echarts,定义option作为数据的容器,初始化后的myCharts.setOption(option);

var myChart = echarts.init(document.getElementById('main'));//初始化
var option = {
};
myChart.setOption(option);

4.具体参数变量设置可参照api及相关书籍,如《ECharts-HowTo》

5.部分样式修改展示

series: [{
name: '监控项',
type: 'bar',
data: [120, 230, 503,183,435,288],
barWidth : 30,//设置柱条宽度
itemStyle:{ //设置柱条颜色
normal:{
color:'rgba(251,110,82,1)'
} }
}]



echarts引入及应用的更多相关文章

  1. Python+Django+js+echarts引入本地js文件的操作方法

    1. 选择正确的echarts.js,开发版选择echarts.baidu.com上的源码版,避免出现问题 2. 在项目主目录中新建static文件夹,里面建立js.css.images文件夹 3. ...

  2. vue中echarts引入中国地图

    <div id="myChartChina" :style="{width: '100%', height: '500px'}"></div& ...

  3. 关于将ECharts引入到项目中的几种方式

    方式一.在webpack中使用ECharts 1.npm安装ECharts npm install echarts --save 2.引入ECharts 通过 npm 上安装的 ECharts 和 z ...

  4. AngularJS引入Echarts的Demo

    最近要用到图表展示,想了想,还是首选Echarts,HighCharts和D3.js备用吧, 而项目中也用到了AngularJS,所以需要把Echarts引入到AngularJs中一起使用, 试了试, ...

  5. vue引入echarts、找不到的图表引入方法、图表中的点击事件

    1.在vue-cli项目中添加webpack配置,本文引入的最新版本.在 3.1.1 版本之前 ECharts 在 npm 上的 package 是非官方维护的,从 3.1.1 开始由官方 EFE 维 ...

  6. vue按需引入echarts

    下载安装echarts包:npm install echarts -D 一.全局引入 main.js中配置 import echarts from 'echarts' //引入echarts Vue. ...

  7. Vue 中引入echarts

    安装依赖 npm install echarts -S 或者使用淘宝的镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org ...

  8. vue引入echarts

    效果图: 1.安装Echarts :     npm install echarts -S 或者使用国内的淘宝镜像: 安装: npm install -g cnpm --registry=https: ...

  9. Ionic2系列——在Ionic2中使用ECharts

    在群里看到有人问怎么在Ionic2中集成ECharts来显示图表.当时答应说写个blog,简单写下步骤. 在TypeScript中如果要使用第三方库,必须要有d.ts,也就是定义文件,没有这个文件的话 ...

随机推荐

  1. Lab_6_SysOps_AutoScaling_Linux_v2.5

    System Operations - Lab 6: Using Amazon Elastic Load Balancer (Linux) - 2.5 ======================== ...

  2. <<软件测试实战>>读书笔记

    软件测试基础 软件的复杂度已经超越了人的理解能力 1. 虽然高抽象的层次语言,程序框架,程序库等提高了人的生产力,但是还是需要开发者深入理解细节,可以减少开发时间,但是无法减少开发者学习整个技术栈的时 ...

  3. sqlite里执行查询提示未启用约束、主键冲突之——数据竟能超字段长度存储

    数据表设计如图:szflbm为主键 数据表主键数据: 以上数据在查询时,执行到该语句adapter.Fill(table); 提示主键冲突. 解决: 1.尝试修改数据,把ZC1改成ZZ,正常.说明原因 ...

  4. 学习opencv

    图像缩放 cv::Mat src_img = cv::imread(); ; cv::Mat dst_img1; cv::Mat dst_img2(src_img.rows*0.5, src_img. ...

  5. 由system.currentTimeMillis() 获得当前的时间

    System类代表系统,系统级的很多属性和控制方法都放置在该类的内部.该类位于java.lang包. currentTimeMillis方法 public static long currentTim ...

  6. PSP(11.9~11.16)

    14号 类别c 内容c 开始时间s 结束e 中断I 净时间T 看书 设计模式 15:20 17:10 25m 85m 看书 构建执法 19:00 20:10 0m 70m 15号 类别c 内容c 开始 ...

  7. 关于PetaPoco的T4模板使用

    PetaPoco是一款适用于.Net 和Mono的微小.快速.单文件的微型ORM.PetaPoco介绍:http://www.cnblogs.com/youring2/archive/2012/06/ ...

  8. ADVDAV驱动

    // ADV7179 register configuration array for PAL mode ADI_DEV_ACCESS_REGISTER ADV7179_Cfg[]={ {ADV717 ...

  9. APP开发和web开发的区别

    1.web开发: 1.浏览器直接访问,协议是http,基本都是PC访问,也就是在家和办公场合,网络比较好. 2.web如果多个服务集成的话使用的是ESB来统一集成 2.APP开发 1.手机app客户端 ...

  10. 提交到github远程仓库遇到的问题

    1.could not read from remote repository 可能原因是没有将ssh 密匙添加到github,所以没有权限 解决办法: 1. ssh-keygen -C 'your@ ...