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. [zz]利用碎片时间健身

    利用碎片时间健身(上) http://v.163.com/zixun/V96957QH6/VBSQ4D861.html#from=zixunplay_recommended 利用碎片时间健身(下) h ...

  2. double精度问题

    一个Double值由2个Double相加,比如明明是91.2 + 2.4,结果应为93.6,为什么结果是93.6000000000001 为什么会无端地在小数点后面加很多个0,最后还是一个1 ? 计算 ...

  3. jQuery选择器大全

    1. id选择器(指定id元素) 将id="one"的元素背景色设置为黑色.(id选择器返单个元素) $(document).ready(function () { $('#one ...

  4. [Maven]Apache Maven 入门篇

    作者:George Ma 上 写这个 maven 的入门篇是因为之前在一个开发者会的动手实验中发现挺多人对于 maven 不是那么了解,所以就有了这个想法.这个入门篇分上下两篇.本文着重动手,用 ma ...

  5. centos7 firewall 防火墙

    在部署dubbo-monitor 和dubbo-admin zookeeper时候,外部访问不了部署好的服务,因为端口问题 ,现在把端口操作总结一下 参考: http://www.cnblogs.co ...

  6. jsoncpp初使用

    一 前言 由于最近一个c++项目需要使用json这种数据格式来传输数据, so上网去寻找合适的类库,毕竟对于这种不是很新的技术, 自己造轮子有点得不偿失. 从百度上翻了翻, 基本上就boost跟jso ...

  7. XE6 & IOS开发之开发者账号、苹果证书(2):关于苹果证书

    网上能找到的关于Delphi XE系列的移动开发的相关文章甚少,本文尽量以详细的图文内容.傻瓜式的表达来告诉你想要的答案. 原创作品,请尊重作者劳动成果,转载请注明出处!!! 1.关于苹果证书. 注意 ...

  8. 魅蓝note2在ubuntu14.04下mtp模式无法自动mount的解决方法

    是因为新机型没在列表里的原因. 处理方法如下: As far as I know, MTP works fine in Trusty. You can try this: Uncomment #use ...

  9. Mono登录界面记住密码的控件

    <RelativeLayout android:layout_width="wrap_content" android:layout_height="wrap_co ...

  10. java.lang.classnotfoundexception org.json.jsonexception

    java.lang.classnotfoundexception org.json.jsonexception 解决方法 http://www.java2s.com/Code/Jar/j/Downlo ...