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

相关文章

来自专栏知晓程序

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

1133
来自专栏极客编程

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

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

941
来自专栏编程微刊

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

1K4
来自专栏Jerry的SAP技术分享

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

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

750
来自专栏极客慕白的成长之路

2018 前端趋势:更一致,更简单

1262
来自专栏数据小魔方

Xcelsius(水晶易表)系列——入门篇!

今天是新专题的第一篇——Xcelsius(水晶易表)入门篇! 今天跟大家简单介绍下Xcelsius(水晶易表)这款动态交互式可视化产品。 它是SAP公司首屈一指...

3649
来自专栏互联网杂技

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

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

39111
来自专栏Pytorch实践

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

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

3684
来自专栏程序员宝库

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

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

1376
来自专栏无原型不设计

新手看Mockplus2.3

Mockplus是我从今年下半年开始使用的一款原型设计软件,我被它简单高效的特性深深吸引着。他最近迎来了一次大版本(2.3)的更新,作为一名新手,我看着他再度走...

2717

扫码关注云+社区