ECharts的简单使用过程

网页中经常要使用图表，以前使用的是highcharts插件，现在发现echarts使用起来和highcharts差不多，但是个人感觉echarts更酷炫，以下是echarts的使用过程，其实highcharts使用方法也跟这个差不多，几乎一样。

1、使用基础图形引入js

引入<script type="text/javascript" src="/js/echarts.min.js"></script>

2、需要显示组件，如图例，引入组件

还需要引入<script type="text/javascript" src="/js/echarts-all.js"></script>

3、画布：必须指定高度，否则不会显示

4、使用，定义、显示

var cjhq_chart ;
var option = {title: {text: '均价（元/平米）'},tooltip : {trigger: 'axis'},legend: {data: legendData//数组
            },grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis : [{type: 'category',boundaryGap : false,data : xAxisData//数组
                }],yAxis : [{type : 'value'}],series : ySeries//数组
        };
cjhq_chart = echarts.init(document.getElementById('Chart'));
cjhq_chart.setOption(option, true);

5、动态创建

option.title.text = obj.busName;

option.xAxis[0].data = xAxisDataSingle;

option.series = ySeriesSingle;

option.legend.data = [];

重新赋值option里面的属性的值，再创建面板显示

var div = $('<div class="ChartSingle" id="'+obj.busCode+'" style="height: 300px;"></div>');

div.appendTo($('#single'));

cjhq_chart = echarts.init(document.getElementById(obj.busCode));

cjhq_chart.setOption(option, true);

6、更多功能参考echarts api

示例http://echarts.baidu.com/examples.html

首页http://echarts.baidu.com/

from: http://www.cnblogs.com/itechpark/p/yinzei_js_echarts.html

ECharts的简单使用过程相关推荐

django chart mysql,docker Django+mysql+ECharts+AngularJS简单搭建数据可视化
前面已经搭建了基于docker的Django+MySQL环境下面用ECharts+AngularJS简单在HTML页面上展示MySQL数据库里的数据. 效果图.png {% load static ...
Mapbox + ECharts 实现简单迁徙图
文章目录概述预览效果实现代码说明相关链接概述 ECharts是开源的可视化图表库,其中有丰富的图表.本文使用Mapbox结合ECharts插件实现了简单的迁徙地图. 预览效果实现代码 & ...
oracle xe 安装配置,(转)oracle 10g xe 我的安装实践及简单配置过程
(转)oracle 10g xe 我的安装实践及简单配置过程我的安装过程 1.编辑 /etc/apt/sources.list : sudo cp /etc/apt/sources.list /et ...
KubeVela 1.4：让应用交付更安全、上手更简单、过程更透明
作者:孙健波,曾庆国 KubeVela 是一个现代化的软件交付控制平面,目标是让应用的部署和运维在如今的混合多云环境下更简单.敏捷.可靠.自 1.1 版本发布以来,KubeVela 架构上天然打通了企 ...
linux下helloworld的简单编译过程
我们在使用gcc生成可执行程序的时候,一般是命令: gcc *.c, 生成可执行文件a.out 其实过程可以分为4个步骤,分别是预处理,编译,汇编和链接.下面以最基本的helloworld来简单了解 ...
Echarts的简单使用
因为要做软件杯的项目,了解了一下现在比较热门的统计图库,有以下几种: MSChart 这个是Visual Studio里的自带控件,使用比较简单,不过数据这块需要在后台绑定. ichartjs 是 ...
Echarts 雷达简单应用
封装雷达图图表显示在首页目标:封装一个echarts中的雷达图表显示在首页的绩效指数的位置第一步, 安装echarts图表 ```bash $ npm i echarts ``` > ech ...
Echarts最简单的折线图、柱图、饼图、仪表盘+sql语句
注:以后所有升级版的图形化显示都在此基础上延伸,打好基础才是硬道理本人小白一枚〜欢迎来讨论一,柱图显示: HTM页面: <html style="height: 100%" ...
EXCEL VBA基础：通过创建模块完成简单SUB过程
以下为新建一个简单的SUB过程: 如下所示,需要先打开[VB编辑器],该工具位于WPS下的[开发工具]下,注意,本实验是基于WPS,通过OFFICE的EXCEL打开略有差异,可自行实验. 然后会弹出这 ...

ECharts的简单使用过程

ECharts的简单使用过程相关推荐

最新文章

热门文章