效果图：
代码：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>柱状图、折线图</title>
6 <script src="js/jquery-2.2.3.min.js"></script>
7 <script src="./js/echarts.min.js"></script>
8 </head>
9 <body>
10 <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
11 <div id="demo" style="width: 450px;height: 300px"></div>
12 </body>
13 <script>
14 /*
15 * 知识点：
16 * 1、各个线条颜色设置
17 * 2、X轴 坐标文字过长 倾斜、拼接省略号显示
18 * 3、异步插入图表数据
19 * */
20
21 //初始化一个 echarts 实例
22 var chart = echarts.init(document.getElementById(‘demo‘));
23 //指定图表的配置项和数据
24 var option = {
25 backgroundColor: ‘rgba(70, 131, 254, .3)‘,//设置背景色
26 tooltip: {//提示框组件
27 trigger: ‘axis‘,
28 axisPointer: {
29 type: ‘cross‘,
30 crossStyle: {
31 color: ‘#999‘
32 }
33 }
34 },
35 legend: {//图例组件
36 data:[{name:‘已解决‘,icon:‘circle‘},{name:‘未解决‘,icon:‘circle‘},{name:‘总量‘}],
37 textStyle:{
38 color:‘#ffffff‘,
39 fontSize:12
40 },
41 y: ‘bottom‘,
42 x: ‘center‘ ,
43 },
44 xAxis: [//直角坐标系 grid 中的 x 轴
45 {
46 type: ‘category‘,
47 axisLine:{
48 lineStyle:{
49 color:‘#999999‘,//设置X轴颜色
50 width:1
51 }
52 },
53 data: [],//数据留待异步插入
54 axisPointer: {
55 type: ‘shadow‘
56 },
57 axisLabel:{
58 interval:0,//横轴信息全部显示
59 rotate:45,//度角倾斜显示
60 formatter:function(value){//只显示五个字 其余省略号
61 return value.length > 5?value.substring(0,5)+‘...‘:value;
62 }
63 }
64 }
65 ],
66 yAxis: [//直角坐标系 grid 中的 y 轴
67 {
68 type: ‘value‘,
69 splitLine:{
70 show:true ,
71 lineStyle:{
72 color:‘#ab0e23‘,//设置Y轴 分隔线 颜色
73 width: 1
74 }
75 },
76 axisLine:{
77 lineStyle:{
78 color:‘#999999‘,//设置Y轴颜色
79 width:1
80 }
81 },
82 name: ‘单位（个）‘,
83 // min: 0,//Y坐标最小值
84 // max: 1000,Y坐标最大值
85 // interval: 50,//坐标间隔
86 }
87 ],
88 series : [
89 {
90 name:‘已解决‘,
91 barWidth: ‘30%‘,
92 type:‘bar‘,//柱状/条形图
93 itemStyle : {
94 color: ‘#6AC3F1‘
95 },
96 data:[]//数据留待异步插入
97 },
98 {
99 name:‘未解决‘,
100 barWidth: ‘30%‘,
101 type:‘bar‘,//柱状/条形图
102 itemStyle : {
103 color: ‘#DD6B25‘
104 },
105 data:[]//数据留待异步插入
106 },
107 {
108 name:‘总量‘,
109 type:‘line‘,//折线图
110 itemStyle : {
111 color: ‘#009944‘
112 },
113 yAxisIndex: 0,
114 data:[]//数据留待异步插入
115 }
116 ],
117 };
118
119 //使用刚指定的配置项和数据显示图表。
120 chart.setOption(option);
121 //异步插入图表数据
122 getChartData(chart) ;
123
124
125 //获取图表数据并插入
126 function getChartData() {
127 // $.ajax({
128 // url: ‘/api/...‘,
129 // data: {},
130 // type: "POST",
131 // dataType: ‘json‘,
132 // success: function(result){
133 var result = {
134 meg:‘处理成功‘,
135 req:true,
136 rows:[
137 {
138 name: "部门一",
139 notSolveCount: 312,
140 solveCount: 42,
141 },
142 {
143 name: "部门二",
144 notSolveCount: 312,
145 solveCount: 200,
146 },
147 {
148 name: "部门三",
149 notSolveCount: 312,
150 solveCount: 42,
151 },
152 {
153 name: "很长名字的部门",
154 notSolveCount: 312,
155 solveCount: 42,
156 }, {
157 name: "部门四",
158 notSolveCount: 555,
159 solveCount: 42,
160 }, {
161 name: "部门五",
162 notSolveCount: 312,
163 solveCount: 42,
164 }, {
165 name: "很长名字的部门",
166 notSolveCount: 312,
167 solveCount: 42,
168 }, {
169 name: "很长名字的部门",
170 notSolveCount: 750,
171 solveCount: 42,
172 },
173 {
174 name: "很长名字的部门",
175 notSolveCount: 312,
176 solveCount: 42,
177 },
178 {
179 name: "很长名字的部门",
180 notSolveCount: 312,
181 solveCount: 42,
182 },
183 {
184 name: "很长名字的部门",
185 notSolveCount: 312,
186 solveCount: 42,
187 },
188 {
189 name: "很长名字的部门",
190 notSolveCount: 312,
191 solveCount: 500,
192 },
193 ]
194 }
195 var _name = [], _resolved = [] , _unsolved = [] , _gross = [];
196 if (result.rows.length > 0) {
197 $.each(result.rows,function (i,v) {
198 _name.push(v.name);
199 _resolved.push(v.solveCount);
200 _unsolved.push(v.notSolveCount);
201 _gross.push(v.notSolveCount + v.solveCount);
202 });
203 //像图表中插入数据
204 chart.setOption({
205 series : [
206 {
207 data:_resolved
208 },
209 {
210 data:_unsolved
211 },
212 {
213 data:_gross
214 }
215 ],
216 xAxis : [
217 {
218 data:_name
219 }
220 ]
221 });
222 }
223 // }
224 // });
225 }
226 </script>
227 </html>
原文地址：https://www.cnblogs.com/zhinian-/p/11062544.html
时间： 2024-10-09 23:21:54