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 条评论
登录 后参与评论

相关文章

来自专栏Jerry的SAP技术分享

一个程序猿试用有道云笔记VIP功能体验

熟悉我的朋友应该知道,我有一个微信公众号,叫做“汪子熙", 我会定期在上面推送技术文章。

3100
来自专栏知晓程序

帮你快速抢红包,微信聊天记录竟有这些隐藏操作? | 晓技巧

1453
来自专栏web前端教室

零基础想要学好前端开发,必须先“学好切图做静态页面”

开头第一句,这个文章针对的是零基础学员。 WEB前端开发,是用JS来操作DOM和DATA,响应用户的操作,实现前端的交互,包括更新view和ui以及更多。 Do...

2336
来自专栏编程微刊

如何获取公众号里面的歌曲

2.2K4
来自专栏河湾欢儿的专栏

APP概括

移动端:运行在移动设备上的产品 移动设备:手机 平板 我们做的页面只适用于安卓系统和ios系统,诺基亚是Windows Phone系统不用管

1792
来自专栏程序员宝库

现代前端开发路线图:从零开始,一步步成为前端工程师

编者按:很多人都想学编程。但是苦于没有具体的步骤和指导。比如想找份前端开发的工作,却不知道应该先学习什么再学习什么,也不知道该选择什么样的工具。因为经常被人问到...

1566
来自专栏极客编程

前端开发路线图——从小白到前端工程师

编者按:很多人都想学编程。但是苦于没有具体的步骤和指导。比如想找份前端开发的工作,却不知道应该先学习什么再学习什么,也不知道该选择什么样的工具。因为经常被人问到...

1851
来自专栏即时通讯技术

从客户端的角度来谈谈移动端IM的消息可靠性和送达机制

IM App 是我做过 App 类型里复杂度最高的一类,里面可供深究探讨的技术难点非常之多。这篇文章和大家聊下从移动端客户端的角度所关注的IM消息可靠性和送达机...

2531
来自专栏王大锤

iOS 判断相册相机是否允许

3847
来自专栏知晓程序

微软也做小程序了!图片一键生成 PPT

1893

扫码关注云+社区

领取腾讯云代金券