echarts简单使用

最近在做一个项目,开始使用的是acharts,在电脑端访问的效果还真不错,但是放到手机端访问就惨了,尤其是iOS系统上,各种不兼容,后来准备换收费的hightcharsts,无意间发现有个免费的echarts,后来研究了一下,效果还可以,可是用使用。手机端访问也没问题。下面是一些简单的设置参数,仅供参考:在http://echarts.baidu.com/doc/example/pie1.html上可以直接执行。

?


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

option = {

    //是否可拖动

    calculable: false,

    //设置数据颜色

    color: [‘#fc694b‘‘#7179cb‘‘#79c850‘‘#14b8f6‘‘#ffb65d‘‘#ffd967‘‘#78d9fe‘‘#9a9792‘‘#a6c96a‘],

    series: [

        {

            name: ‘访问来源‘,

            type: ‘pie‘,

            radius: ‘60%‘//半径

            center: [‘50%‘‘50%‘],

            selectedMode: ‘single‘//单选,突出 

            selectedOffset: 10,     //选中扇区偏移量

            //设置lable长度

            itemStyle: {

                normal: {

                    labelLine: {

                        length: 3

                    }

                }

            },

            data: [

                { value: 335, name: ‘直接访问‘, selected: true },

                { value: 310, name: ‘邮件营销‘, selected: false },

                { value: 234, name: ‘联盟广告‘, selected: false },

                { value: 135, name: ‘视频广告‘, selected: false },

                { value: 1548, name: ‘搜索引擎‘, selected: false }

            ]

        }

    ]

};

时间: 2024-08-06 17:05:46

echarts简单使用的相关文章

Echarts简单应用

在对比了HighCharts之后,因为版权问题,还是决定在项目中采用Echarts来做图表展示. Echarts更新速度很快,已经更新到Echarts3了,感觉3的表现更炫.更酷,据说性能更好,但考虑到项目的整体风格,还是采用Echarts2的版本.  在项目正式开始之前,做个一个简单的Demo,结合EasyUI的Grid呈现一个柱状图,后期再考虑对Echarts的js进行二次封装. Echarts的使用跟HighCharts很类似,之前基于HighCharts做了一个Demo之后,熟悉了这类框

ECharts简单运行例子

echarts一个简单运行的小例子,可以直接运行: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script type="text/javascript" src="http://echarts.baidu.com

ECharts 简单的使用过程,完美的图形展示

最近开发项目时要做图形报表,网上找了些东西,还是觉得ECharts靠谱,具备诸多优点,功能强大,图表完美,兼容性也比较好,基于html5动画渲染. 官网的demo中是写得比较全了,但很多用不到的东西直接影响了代码质量,下面我就饼图为例给描述一下echarts的基本使用过程,部分代码是我从demo中裁剪之后的代码 echarts饼状图实现步骤: 1,在简单的html中引入js文件,该js文件可以去官网下载 <head> <meta charset="utf-8">

React+Echarts简单的封装套路

今天我们来介绍一下React中,对Echarts的一个简单的封装. 首先在我们的React项目中,想使用Echart包,首先需要先安装它,安装代码如下,任选一个就可以 cnpm install echarts --save npm install echarts --save yarn add echarts --save 安装好之后,新建一个JS文件,命名test.js,首先导入的是各种依赖(总代码在文章结尾) import React from 'react'; import echarts

echarts简单使用案例

先上效果图: 1.引入js <script src="<%=request.getContextPath() %>/js/echarts/build/dist/echarts.js"></script> 网盘下载: https://yunpan.cn/cMCdXqfIJWRLq  访问密码 4880 2.echarts 前台显示需要一个div容器,并设置高度. 3.配置echarts的路径,和所需模块(可以只加载你需要的) 4.根据数据,显示成不同的

使用echarts简单制作中国地图

网站需要一张中国地图,并且鼠标经过某个省份,该省份的省份名字显示,而且该省份的地区会变色显示. 第一种方法: 将每个省份的图片定位(先隐藏),拼合成一张中国地图,然后再定位省份名称,鼠标经过省份名字,添加hover事件,将对应图片显示. 第二种方法: 使用图形插件echarts,轻松制作. http://echarts.baidu.com/doc/example.html在echarts网站上下载文件包 echarts使用方法查看页面 http://echarts.baidu.com/doc/d

Echarts 简单报表系列三:饼状图

代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <!-- 为ECharts准备一个具备大小(宽高)的Dom --> <div id="main" style="

ECharts本地部署

  将下载的包解压,再将包内文件copy到C:\inetpub\wwwroot下 在html中做如下引用: <script type="text/javascript" src="http://localhost/echarts/build/source/echarts.js"></script> 注意:: 下面这句在操作图表的script标签内 require.config({ paths: { echarts: "http://

[Echarts可视化] 一.入门篇之简单绘制中国地图和贵州地区

最近发生了很多事情,去到了一个新环境学习.但是不论在哪里,我都需要不忘初心,坚持做自己喜欢的事情,在CSDN写博客.教学.爱娜.生活等等.        这篇文章主要是通过Echarts可视化介绍入门知识.中国地图和贵州地区各省份的数据分析.其中贵州地图才是这篇文章的核心内容.这是一篇入门文章,希望对您有所帮助,如果文章中存在不足之处,还请海涵~        官网地址:http://echarts.baidu.com/index.html 一. 入门介绍-第一张图 强烈推荐大家阅读官网的教程进