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. 使用Spring配合Junit进行单元测试的总结

    最近公司的项目和自己的项目中都用到了spring集成junit进行单元测试,总结一下几种基本的用法: 1.直接对spring中注入的bean进行测试(以DAO为例): 在测试类上添加@RunWith注 ...

  2. CORS 协议(跨域资源共享)

      跨域问题 只要协议.域名.端口有任何一个不同,都被当作是不同的域.   为什么会有跨域的限制? 之前发生过的一些跨域安全事件: 新浪微博XSS受攻击事件 2011年6月28日晚,新浪微博出现了一次 ...

  3. [源码]String StringBuffer StringBudlider(2)StringBuffer StringBuilder源码分析

      纵骑横飞 章仕烜   昨天比较忙 今天把StringBuffer StringBulider的源码分析 献上   在讲 StringBuffer StringBuilder 之前 ,我们先看一下 ...

  4. Python基础篇【第3篇】: Python异常处理、反射、动态导入、利用反射的web框架

    异常处理 什么是异常? 异常即是一个事件,该事件会在程序执行过程中发生,影响了程序的正常执行. 一般情况下,在Python无法正常处理程序时就会发生一个异常.异常是Python对象,表示一个错误.当P ...

  5. 定位form光标行

    In AX2009 if you call the research() method on a form passing true, the cursor position within a gri ...

  6. linux 网络编程比较好的文章

    讲解epoll的, 算是比较详细的. 直接看使用部分就行. http://blog.csdn.net/xiajun07061225/article/details/9250579

  7. Python-2 print

    #1 print函数(python版本3.3.5): >>> help(print)Help on built-in function print in module builtin ...

  8. sql install error

    解决SQL Server 2008 R2安装过程中提示Could not open key的解决方法:以管理员身份运行CMD命令提示符,输入以下语句并运行就OK了secedit /configure ...

  9. Win10光驱不见了

    1. 网上教程试了很多,如下: http://jingyan.baidu.com/article/02027811656a8b1bcd9ce570.html http://jingyan.todgo. ...

  10. java SSH框架详解(面试和学习都是最好的收藏资料)

    Java—SSH(MVC)1. 谈谈你mvc的理解MVC是Model—View—Controler的简称.即模型—视图—控制器.MVC是一种设计模式,它强制性的把应用程序的输入.处理和输出分开.MVC ...