SAbargraph.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354
  1. <template>
  2. <div class="bargraph">
  3. <!--<div class="bargraph_title"><p>各校成绩排名</p></div>-->
  4. <div id="myChart" :style="{width: '100%', height: '460px'}"></div>
  5. </div>
  6. </template>
  7. <script>
  8. export default {
  9. name: "bargraph",
  10. data(){
  11. return{
  12. now_url: this.$route.path,
  13. }
  14. },
  15. created() {
  16. this.init();
  17. },
  18. computed:{
  19. zhuxhuang () {
  20. return this.$store.state.zhuxhuang
  21. },
  22. },
  23. methods:{
  24. drawLine(obj) {
  25. let _this = this;
  26. this.$store.state.zhuxhuang.mode = false;
  27. let myChart = this.$echarts.init(document.getElementById('myChart'));
  28. myChart.setOption({
  29. title: {
  30. text: obj.titlename,
  31. left: "left",
  32. top:"0%",
  33. y: "10",
  34. textStyle:{
  35. fontSize:16
  36. }
  37. },
  38. tooltip : {
  39. trigger: 'axis',
  40. axisPointer : { // 坐标轴指示器,坐标轴触发有效
  41. type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
  42. },
  43. formatter: function (value) {
  44. let arr = '';
  45. for (var i = 0; i < value.length / 2; i++) {
  46. //console.log(value[i].seriesName,666666)
  47. var datalist = value[i].seriesName + ' : ' + value[i].data+'<br>';
  48. arr += datalist;
  49. };
  50. let one_average = obj.one_average.name + ' : ' + obj.one_average.data + '<br/>';
  51. let two_average = obj.two_average.name + ' : ' + obj.two_average.data;
  52. arr+=(one_average);
  53. arr+=(two_average);
  54. return arr;
  55. }
  56. },
  57. legend: {
  58. data:obj.titledata,
  59. top:"5%"
  60. },
  61. grid: {
  62. left: '2%',
  63. right: '4%',
  64. bottom: '3.5%',
  65. containLabel: true,
  66. x:100,
  67. y2:100,
  68. },
  69. xAxis : [
  70. {
  71. type : 'category',
  72. data : obj.object_name,
  73. axisLabel: {
  74. interval: 0, //强制文字产生间隔
  75. rotate: 45, //文字逆时针旋转50°
  76. textStyle: { //文字样式
  77. color: "#333",
  78. fontSize: 12,
  79. fontFamily: 'Microsoft YaHei',
  80. }
  81. },
  82. }
  83. ],
  84. dataZoom: {
  85. show: true,
  86. realtime: true,
  87. backgroundColor: "rgba(0,0,0,0)",
  88. handleSize: 15,
  89. backgroundColor: '#fff',
  90. showDataShadow: false,
  91. handleIcon: 'M-292,322.2c-3.2,0-6.4-0.6-9.3-1.9c-2.9-1.2-5.4-2.9-7.6-5.1s-3.9-4.8-5.1-7.6c-1.3-3-1.9-6.1-1.9-9.3c0-3.2,0.6-6.4,1.9-9.3c1.2-2.9,2.9-5.4,5.1-7.6s4.8-3.9,7.6-5.1c3-1.3,6.1-1.9,9.3-1.9c3.2,0,6.4,0.6,9.3,1.9c2.9,1.2,5.4,2.9,7.6,5.1s3.9,4.8,5.1,7.6c1.3,3,1.9,6.1,1.9,9.3c0,3.2-0.6,6.4-1.9,9.3c-1.2,2.9-2.9,5.4-5.1,7.6s-4.8,3.9-7.6,5.1C-285.6,321.5-288.8,322.2-292,322.2z',
  92. fillerColor: new this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [{
  93. //给颜色设置渐变色 前面4个参数,给第一个设置1,第四个设置0 ,就是水平渐变
  94. //给第一个设置0,第四个设置1,就是垂直渐变
  95. offset: 0,
  96. color: '#1eb5e5'
  97. }, {
  98. offset: 1,
  99. color: '#5ccbb1'
  100. }]),
  101. handleColor: '#ddd',//h滑动图标的颜色
  102. handleStyle: {
  103. borderColor: "#cacaca",
  104. borderWidth: "1",
  105. shadowBlur: 0,
  106. background: "#ddd",
  107. shadowColor: "#ddd",
  108. },
  109. backgroundColor: '#eee',//两边未选中的滑动条区域的颜色
  110. y: 420,
  111. height: 8,
  112. start: 0,
  113. end: 45,
  114. },
  115. yAxis : [
  116. {
  117. type : 'value',
  118. }
  119. ],
  120. series : [
  121. {
  122. name:obj.one_data.name,
  123. type:'bar',
  124. stack: '本校',
  125. data:obj.one_data.data,
  126. barWidth : 20,
  127. itemStyle:{
  128. normal:{
  129. color:'#ffb5f6'
  130. }
  131. },
  132. },
  133. {
  134. name: obj.two_data.name,
  135. type:'bar',
  136. stack: '本校',
  137. data: obj.two_data.data,
  138. barWidth : 20,
  139. itemStyle:{
  140. normal:{
  141. color:'#fdd57e'
  142. }
  143. },
  144. },
  145. {
  146. name: obj.three_data.name,
  147. type:'bar',
  148. stack: '本校',
  149. data:obj.three_data.data,
  150. barWidth : 20,
  151. itemStyle:{
  152. normal:{
  153. color:'#ff8d8c'
  154. }
  155. },
  156. },
  157. {
  158. name:obj.four_data.name,
  159. type:'bar',
  160. stack: '本校',
  161. data: obj.four_data.data,
  162. barWidth : 20,
  163. itemStyle:{
  164. normal:{
  165. color:'#73e2fd'
  166. }
  167. },
  168. },
  169. {
  170. name: obj.five_data.name,
  171. type:'bar',
  172. stack: '本校',
  173. data:obj.five_data.data,
  174. barWidth : 20,
  175. itemStyle:{
  176. normal:{
  177. color:'#50dab6'
  178. }
  179. },
  180. },
  181. {
  182. name: obj.six_data.name,
  183. type:'bar',
  184. stack: '本校',
  185. data: obj.six_data.data,
  186. barWidth : 20,
  187. itemStyle:{
  188. normal:{
  189. color:'#6489da'
  190. }
  191. },
  192. },
  193. {
  194. name: obj.quyudata.anotherone_data.name,
  195. type: 'bar',
  196. stack: '区域',
  197. data: obj.quyudata.anotherone_data.datalist,
  198. barWidth : 20,
  199. itemStyle:{
  200. normal:{
  201. color:'#c4cbd1'
  202. }
  203. },
  204. },
  205. {
  206. name: obj.quyudata.anothertwo_data.name,
  207. type: 'bar',
  208. stack: '区域',
  209. data: obj.quyudata.anothertwo_data.datalist,
  210. barWidth: 20,
  211. itemStyle: {
  212. normal: {
  213. color: '#c4cbd1'
  214. }
  215. },
  216. },
  217. {
  218. name: obj.quyudata.anotherthree_data.name,
  219. type: 'bar',
  220. stack: '区域',
  221. data: obj.quyudata.anotherthree_data.datalist,
  222. barWidth: 20,
  223. itemStyle: {
  224. normal: {
  225. color: '#c4cbd1'
  226. }
  227. },
  228. },
  229. {
  230. name: obj.quyudata.anotherfour_data.name,
  231. type: 'bar',
  232. stack: '区域',
  233. data: obj.quyudata.anotherfour_data.datalist,
  234. barWidth: 20,
  235. itemStyle: {
  236. normal: {
  237. color: '#c4cbd1'
  238. }
  239. },
  240. },
  241. {
  242. name: obj.quyudata.anotherfive_data.name,
  243. type: 'bar',
  244. stack: '区域',
  245. data: obj.quyudata.anotherfive_data.datalist,
  246. barWidth: 20,
  247. itemStyle: {
  248. normal: {
  249. color: '#c4cbd1'
  250. }
  251. },
  252. },
  253. {
  254. name: obj.quyudata.anothersix_data.name,
  255. type: 'bar',
  256. stack: '区域',
  257. data: obj.quyudata.anothersix_data.datalist,
  258. barWidth: 20,
  259. itemStyle: {
  260. normal: {
  261. color: '#c4cbd1'
  262. }
  263. },
  264. },
  265. ]
  266. }),
  267. myChart.on('click', function (param) {
  268. let schoolname = param.name;
  269. if (schoolname == '成都七中') {
  270. _this.cdqz();
  271. } else if (schoolname == '成都四中') {
  272. _this.cdsz();
  273. } else if (schoolname == '成都九中') {
  274. _this.cdjz();
  275. } else if (schoolname == '成都树德中学') {
  276. _this.cdsd();
  277. } else if (schoolname == '师大一中') {
  278. _this.sdyz();
  279. } else if (schoolname == '西川中学') {
  280. _this.xczx();
  281. } else if (schoolname == '成都市石室中学') {
  282. _this.sszx();
  283. }
  284. })
  285. },
  286. //七中
  287. cdqz() {
  288. this.$api.Findcdqz({})
  289. .then((response) => {
  290. this.$store.state.leida= response.result.data;
  291. })
  292. },
  293. //四中
  294. cdsz() {
  295. this.$api.Findcdsz({})
  296. .then((response) => {
  297. this.$store.state.leida = response.result.data;
  298. })
  299. },
  300. //九中
  301. cdjz() {
  302. this.$api.Findcdjz({})
  303. .then((response) => {
  304. this.$store.state.leida = response.result.data;
  305. })
  306. },
  307. //树德
  308. cdsd() {
  309. this.$api.Findcdsd({})
  310. .then((response) => {
  311. this.$store.state.leida = response.result.data;
  312. })
  313. },
  314. //师大一中
  315. sdyz() {
  316. this.$api.Findsdyz({})
  317. .then((response) => {
  318. this.$store.state.leida = response.result.data;
  319. })
  320. },
  321. //西川中学
  322. xczx() {
  323. this.$api.Findxczx({})
  324. .then((response) => {
  325. this.$store.state.leida = response.result.data;
  326. })
  327. },
  328. //石室中学
  329. sszx() {
  330. this.$api.Findsszx({})
  331. .then((response) => {
  332. this.$store.state.leida = response.result.data;
  333. })
  334. },
  335. init() {
  336. this.$api.FindBargraph({})
  337. .then((response) => {
  338. this.$store.state.zhuxhuang = response.result.data;
  339. })
  340. },
  341. },
  342. watch:{
  343. // 监听指令
  344. zhuxhuang(a){
  345. if (a) {
  346. this.drawLine(a)
  347. }
  348. },
  349. }
  350. }
  351. </script>