专栏首页问天丶天问Jquery使用echarts饼图

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

相关文章

  • Vue+Echarts实现一个饼状图

    在jQuery里面,实现一个折线图,【前端统计图】echarts实现单条折线图 https://www.jianshu.com/p/0354a4f8c563。

    王小婷
  • 前端开发者常用的 9个JavaScript 图表库

    英文: Anton Shaleynikov 译文:葡萄城控件 www.cnblogs.com/powertoolsteam/p/top-9-javascri...

    企鹅号小编
  • 12个最好的 JavaScript 图形绘制库

    众多周知,图形和图表要比文本更具表现力和说服力。图表是数据图形化的表示,通过形象的图表来展示数据,比如条形图,折线图,饼图等等。可视化图表可以帮助开发者更容易理...

    用户4962466
  • 前端开发者常用的9个JavaScript图表库

    葡萄城控件
  • 前端开发者常用的9个JavaScript图表库

    当前,数据可视化已经成为数据科学领域非常重要的一部分。不同网络系统中产生的数据,都需要经过适当的可视化处理,以便更好的呈现给用户读取和分析。 对任何一个组织来说...

    葡萄城控件
  • 又带来了12个炫酷的数据可视化作品含源码|推荐收藏

    青年码农
  • 环形饼图ECharts实现Demo

    由于接下来的项目可能会大量用到图表显示与交互,所以抽空仔细看了下echarts文档。顺手根据可能有的项目需求写了个饼图demo。本例只写出demo所用配置的注意...

    前端_AWhile
  • Echarts鼠标事件阻止冒泡

    按照上面的分析,接下来我们只需要对扇形的点击事件做阻止冒泡就好了。 我的测试代码如下: 分别使用了常识里的event.stopPropagation()、r...

    celineWong7
  • 直播视频网站源码,使用Echarts实现饼图

    以上就是直播视频网站源码,使用Echarts实现饼图相关的代码, 更多内容欢迎关注之后的文章

    yunbaokeji柯基

扫码关注云+社区

领取腾讯云代金券