Jquery使用echarts饼图

1.官网下载 

http://echarts.baidu.com/download.html

2.导入项目

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[图片]http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

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

</head>

<body>

    <script type="text/javascript">

  var mychart = echarts.init(document.getElementById('main'));

     mychart.setOption({

    title : {

        text: '满意度比例图',

        x:'center'

    },

    tooltip : {

        trigger: 'item',

        formatter: "{a} {b} : {c} ({d}%)"

    },

    legend:{

        orient: 'vertical',

        left: 'left',

        data: []

    },

    series : [

        {

            name: '满意度',

            type: 'pie',

            radius : '55%',

            center: ['50%', '60%'],

            data:[

{"name":"满意","value":"1"},

{"name":"基本满意","value":"1"},

{"name":"不满意","value":"1"},

{"name":"不满意","value":"1"},

{"name":"基本满意","value":"1"}

],

            itemStyle: {

                emphasis: {

                    shadowBlur: 10,

                    shadowOffsetX: 0,

                    shadowColor: 'rgba(0, 0, 0, 0.5)'

                }

            }

        }

    ] 

}); 

     function changePieData(){

var option =  mychart.getOption();

var list =[{"name":"满意","value":"5"},{"name":"基本满意","value":"5"},{"name":"不满意","value":"5"},{"name":"不满意","value":"5"},{"name":"基本满意","value":"5"}];

        option.series[0].data = list;

        mychart.setOption(option);

     }

</script>

<button onclick="changePieData()">更新数据</button>

</body>

</html>

3.效果图

以上则为jq使用echarts饼图的简单步骤方法,希望对大家有所帮助!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Youngxj

超炫经典HTML5游戏 附游戏源码

3168
来自专栏NewbieWeb

某个程序员眼中的用户体验设计

作为一名半路出家的前端工程师,大概开发移动端网页有两年时间了吧,虽然交互设计不是我的工作内容,但也或多或少的踩了一些坑,然后根据这些坑记录了一些小总结,比如:

741
来自专栏知晓程序

小程序如何快速过审?这 4 位开发者的经验是……

小程序审核需要多长时间呢?有哪些「让人意想不到」的审核不通过原因?又有什么审核避坑经验可以借鉴呢?

442
来自专栏逍遥剑客的游戏开发

关于Web3D

1443
来自专栏玉树芝兰

微信公众号Markdown Here排版的缺失环节

早上看了一下微信公众号后台。我上一篇微信公众号什么时间发的?看完我自己都吓了一跳——4月15日!

831
来自专栏无原型不设计

从iOS 11 UI Kit中谈谈iOS 11的新变化

北京时间9月20日凌晨1点,iOS 11终于迎来了正式版的推送,相信各位小伙伴已经在第一时间进行了升级。iOS 11毫无疑问是一次大规模的系统更新,UI、系统...

3069
来自专栏腾讯大讲堂的专栏

面向设计的半封装web组件开发

作者:张鑫旭,资深钓鱼爱好者,然后平时喜欢研究与学习前端技术。 前言 本文内容可谓是对大脑认知的一场洗礼。我们平常提到组件,就会想到重用,各个项目都能使用。而...

19210
来自专栏HTML5学堂

从“一滴水”映射整个“搜索引擎机制”

今天我们主要借这个机会说说搜索引擎的工作原理~ 小编2014年年底的时候,去三亚旅游,当时有一天,中午打算在住的旅店吃饭,于是打算叫KFC来吃。 打开百度,搜...

3407
来自专栏爱原型爱设计

2018年不可错过的创意404报错设计

404报错页面,作为提醒网站访问者服务器未找到请求资源或文件的页面,时常被UI/UX设计师,产品经理以及网页/软件开发者视作 (包括枯燥的登录页面,加载页面以及...

63920
来自专栏性能与架构

2016前端开发者调查结果

最流行的JS库和框架 ? 主要看绿色柱和橙色柱即可,绿色 相当于 知名度,橙色 相当于 使用程度。 使用最多的库和框架: jquery,underscore,l...

31011

扫码关注云+社区