widgetBarlinechart.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466
  1. <template>
  2. <div :style="styleObj">
  3. <v-chart :options="options" autoresize/>
  4. </div>
  5. </template>
  6. <script>
  7. export default {
  8. name: "WidgetBarlinechart",
  9. components: {},
  10. props: {
  11. value: Object,
  12. ispreview: Boolean
  13. },
  14. data() {
  15. return {
  16. options: {
  17. color: [],
  18. grid: {},
  19. title: {
  20. text: "",
  21. textStyle: {
  22. color: "#fff"
  23. }
  24. },
  25. tooltip: {
  26. trigger: "item",
  27. formatter: "{a} <br/>{b} : {c}%"
  28. },
  29. legend: {
  30. textStyle: {
  31. color: "#fff"
  32. },
  33. },
  34. xAxis: [
  35. {
  36. type: "category",
  37. data: [],
  38. axisLabel: {
  39. show: false,
  40. textStyle: {
  41. color: "#fff"
  42. }
  43. }
  44. }
  45. ],
  46. yAxis: [
  47. {
  48. type: "value",
  49. name: "",
  50. min: 0,
  51. max: 250,
  52. interval: 50,
  53. axisLabel: {
  54. show: true,
  55. textStyle: {
  56. color: "#fff"
  57. }
  58. }
  59. },
  60. {
  61. type: "value",
  62. name: "",
  63. min: 0,
  64. max: 25,
  65. interval: 5,
  66. axisLabel: {
  67. show: true,
  68. textStyle: {
  69. color: "#fff"
  70. }
  71. }
  72. }
  73. ],
  74. series: [
  75. {
  76. name: "",
  77. type: "bar",
  78. yAxisIndex: 0,
  79. data: [],
  80. itemStyle: {
  81. barBorderRadius: null
  82. }
  83. },
  84. {
  85. name: "",
  86. type: "line",
  87. yAxisIndex: 1,
  88. data: [],
  89. itemStyle: {}
  90. }
  91. ]
  92. },
  93. optionsStyle: {}, // 样式
  94. optionsData: {}, // 数据
  95. optionsCollapse: {}, // 图标属性
  96. optionsSetup: {}
  97. };
  98. },
  99. computed: {
  100. styleObj() {
  101. return {
  102. position: this.ispreview ? "absolute" : "static",
  103. width: this.optionsStyle.width + "px",
  104. height: this.optionsStyle.height + "px",
  105. left: this.optionsStyle.left + "px",
  106. top: this.optionsStyle.top + "px",
  107. background: this.optionsSetup.background
  108. };
  109. }
  110. },
  111. watch: {
  112. value: {
  113. handler(val) {
  114. this.optionsStyle = val.position;
  115. this.optionsData = val.data;
  116. this.optionsCollapse = val.collapse;
  117. this.optionsSetup = val.setup;
  118. this.editorOptions();
  119. },
  120. deep: true
  121. }
  122. },
  123. created() {
  124. this.optionsStyle = this.value.position;
  125. this.optionsData = this.value.data;
  126. this.optionsCollapse = this.value.collapse;
  127. this.optionsSetup = this.value.setup;
  128. this.editorOptions();
  129. },
  130. methods: {
  131. // 修改图标options属性
  132. editorOptions() {
  133. this.setOptionsTitle();
  134. this.setOptionsX();
  135. this.setOptionsY();
  136. this.setOptionsLine();
  137. this.setOptionsBar();
  138. this.setOptionsTooltip();
  139. this.setOptionsData();
  140. this.setOptionsMargin();
  141. this.setOptionsLegend();
  142. this.setOptionsColor();
  143. },
  144. // 标题修改
  145. setOptionsTitle() {
  146. const optionsSetup = this.optionsSetup;
  147. const title = {};
  148. title.text = optionsSetup.titleText;
  149. title.show = optionsSetup.isNoTitle;
  150. title.left = optionsSetup.textAlign;
  151. title.textStyle = {
  152. color: optionsSetup.textColor,
  153. fontSize: optionsSetup.textFontSize,
  154. fontWeight: optionsSetup.textFontWeight
  155. };
  156. title.subtext = optionsSetup.subText;
  157. title.subtextStyle = {
  158. color: optionsSetup.subTextColor,
  159. fontWeight: optionsSetup.subTextFontWeight,
  160. fontSize: optionsSetup.subTextFontSize
  161. };
  162. this.options.title = title;
  163. },
  164. // X轴设置
  165. setOptionsX() {
  166. const optionsSetup = this.optionsSetup;
  167. const xAxis = {
  168. type: "category",
  169. show: optionsSetup.hideX, // 坐标轴是否显示
  170. name: optionsSetup.xName, // 坐标轴名称
  171. nameTextStyle: {
  172. color: optionsSetup.nameColorX,
  173. fontSize: optionsSetup.nameFontSizeX
  174. },
  175. nameRotate: optionsSetup.textAngle, // 文字角度
  176. inverse: optionsSetup.reversalX, // 轴反转
  177. axisLabel: {
  178. show: true,
  179. interval: optionsSetup.textInterval, // 文字间隔
  180. rotate: optionsSetup.textAngle, // 文字角度
  181. textStyle: {
  182. color: optionsSetup.Xcolor, // x轴 坐标文字颜色
  183. fontSize: optionsSetup.fontSizeX
  184. }
  185. },
  186. axisLine: {
  187. show: true,
  188. lineStyle: {
  189. color: optionsSetup.lineColorX
  190. }
  191. },
  192. splitLine: {
  193. show: optionsSetup.isShowSplitLineX,
  194. lineStyle: {
  195. color: optionsSetup.splitLineColorX
  196. }
  197. }
  198. };
  199. this.options.xAxis = xAxis;
  200. },
  201. // Y轴设置
  202. setOptionsY() {
  203. const optionsSetup = this.optionsSetup;
  204. const yAxis = [
  205. {
  206. type: "value",
  207. splitNumber: optionsSetup.splitNumberLeft,// 均分
  208. show: optionsSetup.isShowYLeft, // 坐标轴是否显示
  209. name: optionsSetup.textNameYLeft, // 坐标轴名称
  210. nameTextStyle: { // 别名
  211. color: optionsSetup.nameColorYLeft,
  212. fontSize: optionsSetup.namefontSizeYLeft
  213. },
  214. inverse: optionsSetup.reversalY, // 轴反转
  215. axisLabel: {
  216. show: true,
  217. textStyle: {
  218. color: optionsSetup.colorY, // y轴 坐标文字颜色
  219. fontSize: optionsSetup.fontSizeY
  220. }
  221. },
  222. axisLine: {
  223. show: true,
  224. lineStyle: {
  225. color: optionsSetup.lineColorY
  226. }
  227. },
  228. splitLine: {
  229. show: false,
  230. }
  231. },
  232. {
  233. type: "value",
  234. splitNumber: optionsSetup.splitNumberRight,// 均分
  235. show: optionsSetup.isShowYRight, // 坐标轴是否显示
  236. name: optionsSetup.textNameYRight, // 坐标轴名称
  237. nameTextStyle: { // 别名
  238. color: optionsSetup.nameColorYRight,
  239. fontSize: optionsSetup.namefontSizeYRight
  240. },
  241. inverse: optionsSetup.reversalY, // 轴反转
  242. axisLabel: {
  243. show: true,
  244. textStyle: {
  245. color: optionsSetup.colorY, // y轴 坐标文字颜色
  246. fontSize: optionsSetup.fontSizeY
  247. }
  248. },
  249. axisLine: {
  250. show: true,
  251. lineStyle: {
  252. color: optionsSetup.lineColorY
  253. }
  254. },
  255. splitLine: {
  256. show: false,
  257. }
  258. }
  259. ];
  260. this.options.yAxis = yAxis;
  261. },
  262. // 折线设置 数值设置
  263. setOptionsLine() {
  264. const optionsSetup = this.optionsSetup;
  265. const series = this.options.series;
  266. for (const key in series) {
  267. if (series[key].type == "line") {
  268. series[key].showSymbol = optionsSetup.markPoint;
  269. series[key].symbolSize = optionsSetup.pointSize;
  270. series[key].smooth = optionsSetup.smoothCurve;
  271. if (optionsSetup.area) {
  272. series[key].areaStyle = {
  273. opacity: optionsSetup.areaThickness / 100
  274. };
  275. } else {
  276. series[key].areaStyle = {
  277. opacity: 0
  278. };
  279. }
  280. series[key].lineStyle = {
  281. width: optionsSetup.lineWidth
  282. };
  283. series[key].itemStyle.borderRadius = optionsSetup.radius;
  284. series[key].label = {
  285. show: optionsSetup.isShowLine,
  286. position: "top",
  287. distance: optionsSetup.distanceLine,
  288. fontSize: optionsSetup.fontSizeLine,
  289. color: optionsSetup.subTextColorLine,
  290. fontWeight: optionsSetup.fontWeightLine
  291. };
  292. }
  293. }
  294. this.options.series = series;
  295. },
  296. // 柱体设置 数值设置
  297. setOptionsBar() {
  298. const optionsSetup = this.optionsSetup;
  299. const series = this.options.series;
  300. for (const key in series) {
  301. if (series[key].type == "bar") {
  302. series[key].label = {
  303. show: optionsSetup.isShowBar,
  304. position: "top",
  305. distance: optionsSetup.distanceBar,
  306. fontSize: optionsSetup.fontSizeBar,
  307. color: optionsSetup.subTextColorBar,
  308. fontWeight: optionsSetup.fontWeightBar
  309. };
  310. series[key].barWidth = optionsSetup.maxWidth;
  311. series[key].barMinHeight = optionsSetup.minHeight;
  312. series[key].itemStyle.barBorderRadius = optionsSetup.radius;
  313. }
  314. }
  315. this.options.series = series;
  316. },
  317. // tooltip 设置
  318. setOptionsTooltip() {
  319. const optionsSetup = this.optionsSetup;
  320. const tooltip = {
  321. trigger: "item",
  322. show: true,
  323. textStyle: {
  324. color: optionsSetup.tipsColor,
  325. fontSize: optionsSetup.tipsFontSize
  326. }
  327. };
  328. this.options.tooltip = tooltip;
  329. },
  330. // 边距设置
  331. setOptionsMargin() {
  332. const optionsSetup = this.optionsSetup;
  333. const grid = {
  334. left: optionsSetup.marginLeft,
  335. right: optionsSetup.marginRight,
  336. bottom: optionsSetup.marginBottom,
  337. top: optionsSetup.marginTop,
  338. containLabel: true
  339. };
  340. this.options.grid = grid;
  341. },
  342. setOptionsLegend() {
  343. const optionsSetup = this.optionsSetup;
  344. const legend = this.options.legend;
  345. legend.show = optionsSetup.isShowLegend;
  346. legend.left = optionsSetup.lateralPosition;
  347. legend.top = optionsSetup.longitudinalPosition;
  348. legend.bottom =
  349. optionsSetup.longitudinalPosition;
  350. legend.orient = optionsSetup.layoutFront;
  351. legend.textStyle = {
  352. color: optionsSetup.legendColor,
  353. fontSize: optionsSetup.legendFontSize
  354. };
  355. legend.itemWidth = optionsSetup.legendWidth;
  356. },
  357. // 图例名称设置
  358. setOptionsLegendName(name){
  359. const optionsSetup = this.optionsSetup;
  360. const series = this.options.series;
  361. const legendName = optionsSetup.legendName;
  362. // 图例没有手动写则显示原值,写了则显示新值
  363. if (null == legendName || legendName == '') {
  364. for (let i = 0; i < name.length; i++) {
  365. series[i].name = name[i];
  366. }
  367. this.options.legend['data'] = name;
  368. }else {
  369. const arr = legendName.split('|');
  370. for (let i = 0; i < arr.length; i++) {
  371. series[i].name = arr[i];
  372. }
  373. this.options.legend['data'] = arr
  374. }
  375. },
  376. // 图例颜色修改
  377. setOptionsColor() {
  378. const optionsSetup = this.optionsSetup;
  379. const customColor = optionsSetup.customColor;
  380. if (!customColor) return;
  381. const arrColor = [];
  382. for (let i = 0; i < customColor.length; i++) {
  383. arrColor.push(customColor[i].color);
  384. }
  385. this.options.color = arrColor;
  386. this.options = Object.assign({}, this.options);
  387. },
  388. // 数据处理
  389. setOptionsData() {
  390. const optionsData = this.optionsData; // 数据类型 静态 or 动态
  391. optionsData.dataType == "staticData"
  392. ? this.staticDataFn(optionsData.staticData)
  393. : this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
  394. },
  395. staticDataFn(val) {
  396. const series = this.options.series;
  397. let axis = [];
  398. let bar = [];
  399. let line = [];
  400. for (const i in val) {
  401. axis[i] = val[i].axis;
  402. bar[i] = val[i].bar;
  403. line[i] = val[i].line;
  404. }
  405. // x轴
  406. this.options.xAxis.data = axis;
  407. // series
  408. for (const i in series) {
  409. if (series[i].type == "bar") {
  410. series[i].data = bar;
  411. } else {
  412. series[i].data = line;
  413. }
  414. }
  415. const legendName = [];
  416. legendName.push('bar');
  417. legendName.push('line');
  418. this.options.legend['data'] = legendName;
  419. this.setOptionsLegendName(legendName);
  420. },
  421. dynamicDataFn(val, refreshTime) {
  422. if (!val) return;
  423. if (this.ispreview) {
  424. this.getEchartData(val);
  425. this.flagInter = setInterval(() => {
  426. this.getEchartData(val);
  427. }, refreshTime);
  428. } else {
  429. this.getEchartData(val);
  430. }
  431. },
  432. getEchartData(val) {
  433. const data = this.queryEchartsData(val);
  434. data.then(res => {
  435. this.renderingFn(res);
  436. });
  437. },
  438. renderingFn(val) {
  439. this.options.xAxis.data = val.xAxis;
  440. // series
  441. const series = this.options.series;
  442. const legendName = [];
  443. for (const i in series) {
  444. for (const j in val.series) {
  445. if (series[i].type == val.series[j].type) {
  446. series[i].data = val.series[j].data;
  447. }
  448. }
  449. legendName.push(val.series[i].name);
  450. }
  451. this.options.legend['data'] = legendName;
  452. this.setOptionsLegendName(legendName);
  453. }
  454. }
  455. };
  456. </script>
  457. <style scoped lang="scss">
  458. .echarts {
  459. width: 100%;
  460. height: 100%;
  461. overflow: hidden;
  462. }
  463. </style>