效果图
1.在线版本
1 <!DOCTYPE html>
2 <head>
3 <meta charset="utf-8">
4 <title>ECharts</title>
5 </head>
6 <body>
7 <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
8 <div id="main" style="height:400px"></div>
9 <!-- ECharts单文件引入 -->
10 <script src="http://echarts.baidu.com/build/dist/echarts.js"></script><!-- 此处为在线加载echarts.js-->
11 <script type="text/javascript">
12 // 路径配置
13 require.config({
14 paths: {
15 echarts: ‘http://echarts.baidu.com/build/dist‘ // 此处为在线加载dist包
16 }
17 });
18
19 // 使用
20 require(
21 [
22 ‘echarts‘,
23 ‘echarts/chart/pie‘ // 使用柱状图就加载bar模块，按需加载
24 ],
25 function (ec) {
26 // 基于准备好的dom，初始化echarts图表
27 var myChart = ec.init(document.getElementById(‘main‘));
28
29
30
31 //-------------------------------------此处为option，如果需要更换别的option在这里更改即可
32 var dataStyle = {
33 normal: {
34 label: {show:false},
35 labelLine: {show:false}
36 }
37 };
38 var placeHolderStyle = {
39 normal : {
40 color: ‘rgba(0,0,0,0)‘,
41 label: {show:false},
42 labelLine: {show:false}
43 },
44 emphasis : {
45 color: ‘rgba(0,0,0,0)‘
46 }
47 };
48 option = {
49 title: {
50 text: ‘你是尹帅？‘,
51 subtext: ‘From ExcelHome‘,
52 sublink: ‘http://e.weibo.com/1341556070/AhQXtjbqh‘,
53 x: ‘center‘,
54 y: ‘center‘,
55 itemGap: 20,
56 textStyle : {
57 color : ‘rgba(30,144,255,0.8)‘,
58 fontFamily : ‘微软雅黑‘,
59 fontSize : 35,
60 fontWeight : ‘bolder‘
61 }
62 },
63 tooltip : {
64 show: true,
65 formatter: "{a} <br/>{b} : {c} ({d}%)"
66 },
67 legend: {
68 orient : ‘vertical‘,
69 x : document.getElementById(‘main‘).offsetWidth / 2,
70 y : 45,
71 itemGap:12,
72 data:[‘99%的人表示尹哥哥今年结婚‘,‘88%的人表示尹哥哥没有女朋友‘,‘50%的人表示“尹哥哥不帅气”‘]
73 },
74 toolbox: {
75 show : true,
76 feature : {
77 mark : {show: true},
78 dataView : {show: true, readOnly: false},
79 restore : {show: true},
80 saveAsImage : {show: true}
81 }
82 },
83 series : [
84 {
85 name:‘1‘,
86 type:‘pie‘,
87 clockWise:false,
88 radius : [125, 150],
89 itemStyle : dataStyle,
90 data:[
91 {
92 value:110,
93 name:‘99%的人表示尹哥哥今年结婚‘
94 },
95 {
96 value:1,
97 name:‘invisible‘,
98 itemStyle : placeHolderStyle
99 }
100 ]
101 },
102 {
103 name:‘2‘,
104 type:‘pie‘,
105 clockWise:false,
106 radius : [100, 125],
107 itemStyle : dataStyle,
108 data:[
109 {
110 value:88,
111 name:‘88%的人表示尹哥哥没有女朋友‘
112 },
113 {
114 value:12,//表示百分比，如果想要表示88%，则这里添12
115 name:‘invisible‘,
116 itemStyle : placeHolderStyle
117 }
118 ]
119 },
120 {
121 name:‘3‘,
122 type:‘pie‘,
123 clockWise:false,
124 radius : [75, 100],
125 itemStyle : dataStyle,
126 data:[
127 {
128 value:50,
129 name:‘50%的人表示“尹哥哥不帅气”‘
130 },
131 {
132 value:50,
133 name:‘invisible‘,
134 itemStyle : placeHolderStyle
135 }
136 ]
137 }
138 ]
139 };
140 //-----------------------------------------option结束
141 // 为echarts对象加载数据
142 myChart.setOption(option);
143 }
144 );
145 </script>
146 </body>
2.离线版本
1 <!DOCTYPE html>
2 <head>
3 <meta charset="utf-8">
4 <title>ECharts</title>
5 </head>
6 <body>
7 <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
8 <div id="main" style="height:400px"></div>
9 <!-- ECharts单文件引入 -->
10 <script src="echarts.js"></script><!-- 此处为echarts.js的离线地址-->
11 <script type="text/javascript">
12 // 路径配置
13 require.config({
14 paths: {
15 echarts: ‘dist‘ //此处为本地的dist包，即“echarts-2.2.2\build\dist”，dist文件包的路径,echarts-2.2.2需要自行下载
16 }
17 });
18 require(
19 [
20 ‘echarts‘,
21 ‘echarts/chart/pie‘, // 按需加载所需图表，如需动态类型切换功能，别忘了同时加载相应图表
22 //如果需要map图形，则‘echarts/chart/pie‘更改为‘echarts/chart/map‘
23 ],
24 function (ec) {
25 // 基于准备好的dom，初始化echarts图表
26 var myChart = ec.init(document.getElementById(‘main‘));
27 //--------------从这里开始完全照抄的饼状图代码
28 var dataStyle = {
29 normal: {
30 label: {show:false},
31 labelLine: {show:false}
32 }
33 };
34 var placeHolderStyle = {
35 normal : {
36 color: ‘rgba(0,0,0,0)‘,
37 label: {show:false},
38 labelLine: {show:false}
39 },
40 emphasis : {
41 color: ‘rgba(0,0,0,0)‘
42 }
43 };
44 option = {
45 title: {
46 text: ‘你是尹帅？‘,
47 subtext: ‘From ExcelHome‘,
48 sublink: ‘http://e.weibo.com/1341556070/AhQXtjbqh‘,
49 x: ‘center‘,
50 y: ‘center‘,
51 itemGap: 20,
52 textStyle : {
53 color : ‘rgba(30,144,255,0.8)‘,
54 fontFamily : ‘微软雅黑‘,
55 fontSize : 35,
56 fontWeight : ‘bolder‘
57 }
58 },
59 tooltip : {
60 show: true,
61 formatter: "{a} <br/>{b} : {c} ({d}%)"
62 },
63 legend: {
64 orient : ‘vertical‘,
65 x : document.getElementById(‘main‘).offsetWidth / 2,
66 y : 45,
67 itemGap:12,
68 data:[‘99%的人表示尹哥哥今年结婚‘,‘88%的人表示尹哥哥没有女朋友‘,‘50%的人表示“尹哥哥不帅气”‘]
69 },
70 toolbox: {
71 show : true,
72 feature : {
73 mark : {show: true},
74 dataView : {show: true, readOnly: false},
75 restore : {show: true},
76 saveAsImage : {show: true}
77 }
78 },
79 series : [
80 {
81 name:‘1‘,
82 type:‘pie‘,
83 clockWise:false,
84 radius : [125, 150],
85 itemStyle : dataStyle,
86 data:[
87 {
88 value:110,
89 name:‘99%的人表示尹哥哥今年结婚‘
90 },
91 {
92 value:1,
93 name:‘invisible‘,
94 itemStyle : placeHolderStyle
95 }
96 ]
97 },
98 {
99 name:‘2‘,
100 type:‘pie‘,
101 clockWise:false,
102 radius : [100, 125],
103 itemStyle : dataStyle,
104 data:[
105 {
106 value:88,
107 name:‘88%的人表示尹哥哥没有女朋友‘
108 },
109 {
110 value:12,//表示百分比，如果想要表示88%，则这里添12
111 name:‘invisible‘,
112 itemStyle : placeHolderStyle
113 }
114 ]
115 },
116 {
117 name:‘3‘,
118 type:‘pie‘,
119 clockWise:false,
120 radius : [75, 100],
121 itemStyle : dataStyle,
122 data:[
123 {
124 value:50,
125 name:‘50%的人表示“尹哥哥不帅气”‘
126 },
127 {
128 value:50,
129 name:‘invisible‘,
130 itemStyle : placeHolderStyle
131 }
132 ]
133 }
134 ]
135 };
136 //---饼状图代码抄袭结束
137 // 为echarts对象加载数据
138 myChart.setOption(option); //将option里的数据加载
139 }
140 );
141 </script>
142 </body>
时间： 2024-12-09 16:45:07