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

相关文章

来自专栏程序员宝库

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

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

1466
来自专栏即时通讯技术

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

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

1881
来自专栏星流全栈

还在纠结 Flux 或 Relay,或许 Redux 更适合你

1936
来自专栏SEO

【思考】百度新推出“网页标题作弊详解”

3448
来自专栏跟着阿笨一起玩NET

简单实现ToolStripMenuItem(菜单栏)的单选效果

这几天在写又拍云的客户端,老实说确实学到了不少东西!接下来的几天我会把一些技巧或者原来没有接触过的一些东西发上来,算是复习吧!

782
来自专栏互联网杂技

箭头符号:一个最常见却不容忽视的图标

箭头符号可能是人类图形史上最伟大的创造。 足够简单的图形承载着丰富而又抽象的概念。如果追溯起来,箭头符号的现实原型就是弓箭的箭头。所以箭头指向的方向意味着猎物,...

43311
来自专栏程序员的知识天地

最有效、最全的Vue 2.0 学习路线,各个阶段适用

对于我这种从0.x版本就开始体验 vuejs 的人来说,当然不算难,那时候没各种脚手架和复杂搭配,仅仅是一个mvvm的解决方案库而已,解决了jq带来的繁琐操作d...

1502
来自专栏Pytorch实践

【Python】Selenium辅助海量基金数据获取

今天主要给大家介绍一下Selenium测试工具,它是一款浏览器测试专用的工具,能够模拟用户对浏览器进行鼠标点击、页面滑动等功能。一方面能够用于网页...

3814
来自专栏idealclover的填坑日常

话说输入法——各输入法简要测评

输入法,一个说小不小,说大也不大的东西。往小了说,这不是一个很大的市场,愿意折腾输入法的人也只是千里挑一;然而往大了说,这又是一个与我们的电脑与手机朝夕相伴的不...

3713
来自专栏河湾欢儿的专栏

APP概括

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

1182

扫码关注云+社区