Echarts简单案例 1<html>
2<head>
3<title>echart⽰例</title>
4<script src="echarts-all.js" type="text/javascript"></script>
5</head>
6<body>
7<div id="main1" ></div> 8<script type="text/javascript">
9// 基于准备好的dom，初始化echarts实例
10var myChart1 = echarts.ElementById('main1'));
11
12// 指定图表的配置项和数据
13        option = {
14            title : {
15                x: 'center',                // ⽔平安放位置，默认为左对齐，可选为：
16// 'center' ¦ 'left' ¦ 'right'
17// ¦ {number}（x坐标，单位px）
18                y: 'top',
19                text : '环形图',
20                subtext : '1',
21                itemGap : 0,
22                textStyle : {
23                    fontSize: 24,
24                    fontWeight: 'bolder',
25                    color: '#333'
26                },
27                subtextStyle : {
28                    fontSize: 18,
29                    fontWeight: 'bolder',
30                    color: '#dddddd'
31                }
32            },
33            tooltip: {
34                trigger: 'item',
35                formatter: "{a} <br/>{b}: {c} ({d}%)"
36            },
37            legend: {
38                orient: 'vertical',
39                x: 'left',
40                data:['直接访问','邮件营销','联盟⼴告','视频⼴告','搜索引擎']
41            },
42            series: [
43                {
44                    name:'访问来源',
45                    type:'pie',
46                    radius: ['50%', '70%'],
47                    avoidLabelOverlap: false,
48                    label: {
49                        normal: {
50                            show: false,
51                            position: 'center'
52                        },
53                        emphasis: {
54                            show: true,
55                            textStyle: {setoption
56                                fontSize: '30',
57                                fontWeight: 'bold'
58                            }
59                        }
60                    },
61                    labelLine: {
62                        normal: {
63                            show: false
64                        }
65                    },
66                    data:[
67                        {value:335, name:'直接访问'},
68                        {value:310, name:'邮件营销'},
69                        {value:234, name:'联盟⼴告'},
70                        {value:135, name:'视频⼴告'},
71                        {value:1548, name:'搜索引擎'}
72                    ]
73                }
74            ]
75        };
76
77// 使⽤刚指定的配置项和数据显⽰图表。
78        myChart1.setOption(option);
79        ('click',  function eConsole(param) {
80//这个params可以获取你要的饼图中的当前点击的项的参数
81          alert(param.value+'-'+param.name+'-'+param.seriesName);
82        });
83/*
84
85此外param参数包含的内容有：
86      param.seriesIndex：系列序号（series中当前图形是第⼏个图形第⼏个，从0开始计数）
87      param.dataIndex：数值序列（X轴上当前点是第⼏个点，从0开始计数）
88      param.seriesName：legend名称
89      param.name：X轴值
90      param.data：Y轴值
91      param.value：Y轴值
92      pe：点击事件均为click
93
94*/
95</script>
96</body>
97</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。