从excel提取和过滤数据到echarts中绘制图

主页面

介绍

echarts的事例页面,导入数据比较麻烦,此项目从excel中提取数据(含过滤数据),以注入页面.
代码阐明

• 全部的需要从excel中读取的参数,从代码中替换.需以{{data}} 包罗在内
  
• 使用绘制参数的剖析代码参数可以剖析出来全部参数
  
• 数据配置上传文件后,可以选择列
  
• 数据过滤条件设定后,点击绘制,此时才会过滤数据
  
• 代码块现实是返回echarts.options的信息,下面给了多个事例
  
• 图表设置现实没有使用,需要后端支持才可以,将编辑好的代码生存到数据库,大概取出
  
• 其他的参数,比方绘制参数,建议直接编辑代码完成,而且建议以变量的形式填写在最上方,以提供出来
  
  
  
  

页面代码 commonChart.vue

1. <template>
2.   <div class="app-container" style="height: 100vh;">
3.     <el-row style="height: 100%;">
4.       <el-col :span="10" style="height: 100%;">
5.           <el-tabs type="border-card" style="height: 100%;">
6.             <el-tab-pane label="图表设置" style="height: 100%;">
7.               <el-form ref="elForm" :model="chartForm" label-width="80px" style="height: 100%;">
8.                 <el-form-item label="选择图表" prop="chartType" >
9.                   <el-select v-model="chartForm.chartType" placeholder="请选择选择图表" clearable
10.                              :style="{width: '100%'}">
11.                     <el-option v-for="(item, index) in chartFormOptions" :key="index" :label="item.label"
12.                                :value="item.value" :disabled="item.disabled"></el-option>
13.                   </el-select>
14.                 </el-form-item>
15.               </el-form>
16.             </el-tab-pane>
17.             <el-tab-pane label="代码编辑" style="height: 100%;">
18.                 <vue-ace-editor v-model="chartForm.customChartCode" ref="aceEditor"
19.                                 :width="'100%'"
20.                                 :height="'100%'"
21.                                 mode='javascript'
22.                                 theme='github'/>
23.             </el-tab-pane>
24.             <el-tab-pane label="数据配置">
25.               <el-form :model="dataForm" ref="queryForm" :inline="false" label-width="80px">
26.                 <el-form-item label="上传文件">
27.                   <el-upload
28.                     class="upload-demo"
29.                     action=""
30.                     :before-upload="handleBeforeUpload"
31.                     :file-list="dataForm.fileList"
32.                     :show-file-list="false">
33.                     <el-button size="mini" slot="trigger" type="primary">XLSX文件</el-button>
34.                   </el-upload>
35.                 </el-form-item>
37.                 <el-form-item label="数据过滤">
38.                   <el-table :data="dataForm.dataFilter" style="width: 100%">
39.                     <!-- 选择变量 -->
40.                     <el-table-column label="选择变量" prop="variable">
41.                       <template v-slot="{ row, $index }">
42.                         <el-select v-model="row.variable" placeholder="请选择变量">
43.                           <el-option
44.                             v-for="(item, index) in dataHeader"
45.                             :key="index"
46.                             :label="item"
47.                             :value="index"
48.                           ></el-option>
49.                         </el-select>
50.                       </template>
51.                     </el-table-column>
53.                     <!-- 选择判断关系 -->
54.                     <el-table-column label="选择判断关系" prop="relation">
55.                       <template v-slot="{ row, $index }">
56.                         <el-select v-model="row.relation" placeholder="请选择关系">
57.                           <el-option label="等于" value="equals"></el-option>
58.                           <el-option label="不等于" value="not_equals"></el-option>
59.                           <el-option label="大于" value="greater_than"></el-option>
60.                           <el-option label="小于" value="less_than"></el-option>
61.                         </el-select>
62.                       </template>
63.                     </el-table-column>
65.                     <!-- 选择判断值 -->
66.                     <el-table-column label="选择判断值" prop="value">
67.                       <template v-slot="{ row, $index }">
68.                         <el-select v-if="uniqueData[row.variable] && uniqueData[row.variable].length<10"
69.                                    v-model="row.value"
70.                                    placeholder="请选择值">
71.                           <el-option
72.                             v-for="(item, index) in uniqueData[row.variable]"
73.                             :key="index"
74.                             :label="item"
75.                             :value="item"
76.                           ></el-option>
77.                         </el-select>
78.                         <el-input v-else v-model="row.value">
79.                         </el-input>
80.                       </template>
81.                     </el-table-column>
83.                     <el-table-column label="操作" >
84.                       <template v-slot="scope">
85.                         <el-button type="primary" @click="addRow" size="small">+</el-button>
86.                         <el-button type="danger" @click="deleteRow(scope.$index)" size="small">x</el-button>
87.                       </template>
88.                     </el-table-column>
89.                   </el-table>
90.                 </el-form-item>
91.               </el-form>
92.             </el-tab-pane>
93.             <el-tab-pane label="绘制参数">
94.               <el-form ref="elForm" :model="drawForm" label-width="180px">
95.                 <el-form-item label="操作">
96.                   <el-button type="primary" icon="el-icon-search" size="mini" @click="analyzeCode()">解析代码参数
97.                   </el-button>
98.                 </el-form-item>
99.                 <el-form-item
100.                   v-for="(item, index) in customStatisticalDataColumnName"
101.                   :key="index"
102.                   :label="`统计参数:${item}`">
103.                   <el-select
104.                     v-model="drawForm.statisticalDataColumnCustom[index]"
105.                     placeholder="请选择统计数据列"
106.                   >
107.                     <el-option
108.                       v-for="(item, index) in dataHeader"
109.                       :key="index"
110.                       :label="item"
111.                       :value="index"
112.                     ></el-option>
113.                   </el-select>
114.                 </el-form-item>
115.               </el-form>
116.             </el-tab-pane>
117.           </el-tabs>
118.       </el-col>
120.       <el-col :span="14" style="height: 100%;">
121.         <el-card style="height: 100%;">
122.           <div slot="header" class="clearfix">
123.             <el-button type="primary" icon="el-icon-search" size="medium" @click="redrawChart()">绘制</el-button>
124.           </div>
125.           <div id="chart" style="height: 100%;width: 100%"/>
126.         </el-card>
127.       </el-col>
128.     </el-row>
131.   </div>
132. </template>
134. <script>
135. import * as echarts from "echarts";
136. import * as XLSX from 'xlsx';
137. import VueAceEditor from 'vue2-ace-editor';
138. import 'brace/mode/javascript'; // 引入 JavaScript 语言模式
139. import 'brace/theme/chrome';
142. export default {
143.   components: {
144.     VueAceEditor,
145.   },
146.   data() {
147.     return {
148.       dialogVisible: true,
149.       // 图表配置参数
150.       chartForm: {
151.         //图表类型
152.         chartType: "",
153.         //自定义图表-代码块
154.         customChartCode: null,
155.       },
156.       // 数据配置参数
157.       dataForm: {
158.         fileList: [],   // 存储上传的文件列表
159.         //过滤条件
160.         dataFilter: [
161.           {
162.             variable: "",
163.             relation: "",
164.             value: ""
165.           }
166.         ]
167.       },
168.       // 绘制参数
169.       drawForm: {
170.         statisticalDataColumnCustom: []
171.       },
172.       //自定义图表的配置参数列表
173.       customStatisticalDataColumnName: [],
174.       chartFormOptions: [
175.         {
176.           "label": "自定义图表",
177.           "value": 0
178.         },
179.         {
180.           "label": "正态分布图",
181.           "value": 1
182.         }, {
183.           "label": "散点图",
184.           "value": 2
185.         }
186.       ],
187.       dataHeader: [],
188.       dataBody: [],
189.       uniqueData: [],
190.       filterData: [],
191.       validConditions: [],
192.       chart: null
193.     };
194.   },
195.   mounted() {
196.     this.initChart();
197.     this.$nextTick(() => {
198.       const aceEditor = this.$refs.aceEditor.editor;
199.       if (aceEditor) {
200.         console.log('Editor Loaded:', aceEditor); // 确认编辑器加载成功
201.         aceEditor.getSession().setMode('ace/mode/javascript');  // 强制设置语言模式
202.         aceEditor.setTheme('ace/theme/chrome');  // 强制设置主题
203.         aceEditor.setFontSize('14px');  // 设置字体大小
204.         aceEditor.setHighlightActiveLine(true);  // 设置是否高亮活动行
205.       }
206.     });
207.   },
208.   methods: {
210.     onEditorLoaded(editor) {
211.       console.log('Editor Loaded:', editor); // 检查 editor 对象
212.       if (editor) {
213.         console.log('Ace Mode:', editor.getSession().getMode().$id); // 确认是否加载了 JavaScript 模式
214.         console.log('Ace Theme:', editor.getTheme()); // 确认主题
215.       }
216.     },
217.     analyzeCode() {
218.       //提取含{{}}的字符列表["{{d1}}", "{{d2}}"]
219.       let matchesName = this.chartForm.customChartCode.match(/\{\{(.*?)\}\}/g);
220.       let matchesNameLabel = []
221.       if (matchesName) {
222.         // 去除 {{ 和 }}列表
223.         matchesNameLabel = matchesName.map(match => match.slice(2, -2));
224.       }
225.       this.customStatisticalDataColumnName = matchesNameLabel;
226.       this.$message({message: '解析成功,提取自定义统计参数' + matchesNameLabel, type: 'warning'})
227.     },
228.     addRow() {
229.       // 添加一行数据到表单中
230.       this.dataForm.dataFilter.push({variable: '', relation: '', value: ''});
231.     },
232.     deleteRow(index) {
233.       // 删除对应的行
234.       this.dataForm.dataFilter.splice(index, 1);
235.     },
236.     handleBeforeUpload(file) {
237.       const reader = new FileReader()
238.       reader.onload = (e) => {
239.         const data = e.target.result;
241.         // 解析xlsx文件
242.         const workbook = XLSX.read(data, {type: 'binary'});
244.         // 获取第一个工作表
245.         const sheetName = workbook.SheetNames[0];
246.         const sheet = workbook.Sheets[sheetName];
248.         // 原始
249.         let data_json = XLSX.utils.sheet_to_json(sheet, {header: 1, defval: null});
250.         // 取出第一行作为表头
251.         this.dataHeader = data_json.shift();  // 删除并返回数组的第一个元素
252.         // 剩余的行作为表体
253.         this.dataBody = data_json;
254.         this.buildDynamicForms();
256.         this.$message({message: '解析文件成功,获取记录:' + this.dataBody.length + "条", type: 'warning'})
257.         // this.drawChart();
258.       };
259.       // 读取文件为二进制字符串
260.       reader.readAsBinaryString(file);
261.       return false; // 阻止默认的上传行为
262.     },
263.     buildDynamicForms() {
264.       //获取每列的distance值
265.       let headLength = this.dataHeader.length;
266.       for (let i = 0; i < headLength; i++) {
267.         this.uniqueData[i] = this.getUniqueColumn(this.dataBody, i);
268.       }
269.     },
270.     getUniqueColumn(data, index) {
271.       // 检查数据是否为空
272.       if (!data || !Array.isArray(data) || data.length === 0) {
273.         return [];
274.       }
276.       // 如果数据是二维数组
277.       if (Array.isArray(data[0])) {
278.         // 提取指定列并去重
279.         const column = data.map(row => row[index]);
280.         return [...new Set(column)];
281.       }
283.       // 如果数据是对象数组
284.       if (typeof data[0] === 'object') {
285.         // 提取指定列（即对象的属性）并去重
286.         const column = data.map(item => item[index]);
287.         return [...new Set(column)];
288.       }
290.       // 如果数据格式不匹配
291.       return [];
292.     },
293.     redrawChart() {
294.       this.filterDataByConditions();
295.       let opt = this.chartForm.customChartCode;
296.       let mapping = this.drawForm.statisticalDataColumnCustom;
297.       for (let i = 0; i < mapping.length; i++) {
298.         let data = this.filterData.map(row => row[mapping[i]]);
299.         opt = opt.replace("{{" + this.customStatisticalDataColumnName[i] + "}}", JSON.stringify(data));
300.       }
301.       let rx = (new Function(opt))();
302.       console.log(rx)
303.       this.chart.clear()
304.       this.chart.setOption(rx)
305.     },
306.     initChart() {
307.       let chartDom = document.getElementById("chart");
308.       this.chart = echarts.init(chartDom);
309.     },
310.     filterDataByConditions() {
311.       this.filterData = this.dataBody.filter(item => {
312.         this.validConditions = this.dataForm.dataFilter.filter(c => c.value !== "");
313.         return this.validConditions.every(row => {
314.           let rowKey = row.variable;
315.           let operator = row.relation;
316.           let rowValue = row.value;
317.           switch (operator) {
318.             case "equals":
319.               return item[rowKey] == rowValue;
320.             case "not_equals":
321.               return item[rowKey] != rowValue;
322.             case "greater_than":
323.               return item[rowKey] > rowValue;
324.             case "less_than":
325.               return item[rowKey] < rowValue;
326.             default:
327.               throw new Error(`Unknown operator: ${operator}`);
328.           }
329.         });
330.       });
331.     },
332.   }
333. }
334. ;
335. </script>
336. <style scoped>
337. /* 或者使用 ::v-deep */
338. ::v-deep .el-dialog__wrapper {
339.   pointer-events: none;
340. }
342. ::v-deep .el-dialog__body {
343.   padding-bottom: 5px
344. }
346. ::v-deep .el-dialog {
347.   pointer-events: auto;
348. }
350. ::v-deep .el-card__body{
351.   height: 100%;
352. }
353. ::v-deep .el-tabs__content{
354.   height: 90% !important;
355. }
357. </style>

复制代码

代码事例

事例1 单散点分布 singleScatterDistribution

1. // 单散点分布 singleScatterDistribution
2. /*******************配置参数*******************/
3. //第一组的x,y,和size,都是一维数组
4. let dx = {{dx}};
5. let dy = {{dy}};
6. let dSize = {{dSize}};
8. /*******************计算实体********************/
9. let dataX = dx.map((value, index) => [value, dy[index], dSize[index]]);
11. return {
12.   toolbox: {
13.     show: true,
14.     feature: {
15.       dataZoom: {
16.         yAxisIndex: 'none'
17.       },
18.       dataView: {readOnly: false},
19.       restore: {},
20.       saveAsImage: {}
21.     }
22.   },
23.   xAxis: {},
24.   yAxis: {},
25.   legend: {
26.     data: ['数据名称'] // 图例项，对应 series 中的 name
27.   },
28.   dataZoom: [
29.     {
30.       type: 'slider',
31.       show: true,
32.       yAxisIndex: [0],
33.       //不过滤数据，只改变数轴范围。
34.       filterMode: 'none'
35.     },
36.     {
37.       type: 'inside',
38.       yAxisIndex: [0],
39.       filterMode: 'none'
40.     },
41.     //x缩放轴
42.     {
43.       type: 'slider',
44.       show: true,
45.       xAxisIndex: [0],
46.       filterMode: 'none',
47.       height: 20
48.     },
49.     {
50.       type: 'inside',
51.       xAxisIndex: [0],
52.       filterMode: 'none'
53.     }
54.   ],
55.   series: [
56.     {
57.       name: '数据名称',
58.       symbolSize: function (data) {
59.         //return data[2]/100; // 返回 data 中的第三个值（size）
60.         return 7;
61.       },
62.       data: dataX,
63.       type: 'scatter',
64.       itemStyle: {
65.         color: '#5470C6' // 设置第一组数据的颜色
66.       }
67.     }
68.   ]
69. }

复制代码

事例2 双散点分布 doubleScatterDistribution

1. // 双散点分布 doubleScatterDistribution
2. /*******************配置参数*******************/
3. //第一组的x,y,和size,都是一维数组
4. let d1x = {{d1.x}};
5. let d1y = {{d1.y}};
6. let d1size = {{d1.size}};
7. //第二组的x,y,和size,都是一维数组
8. let d2x = {{d1.x}};
9. let d2y = {{d1.y}};
10. let d2size = {{d1.size}};
12. /*******************计算实体********************/
13. let d1 = d1x.map((value, index) => [value, d1y[index], d1size[index]]);
14. let d2 = d2x.map((value, index) => [value, d2y[index], d2size[index]]);
16. return {
17.   toolbox: {
18.     show: true,
19.     feature: {
20.       dataZoom: {
21.         yAxisIndex: 'none'
22.       },
23.       dataView: {readOnly: false},
24.       restore: {},
25.       saveAsImage: {}
26.     }
27.   },
28.   xAxis: {},
29.   yAxis: {},
30.   legend: {
31.     data: ['新数据', '旧数据'] // 图例项，对应 series 中的 name
32.   },
33.   dataZoom: [
34.     {
35.       type: 'slider',
36.       show: true,
37.       yAxisIndex: [0],
38.       //不过滤数据，只改变数轴范围。
39.       filterMode: 'none'
40.     },
41.     {
42.       type: 'inside',
43.       yAxisIndex: [0],
44.       filterMode: 'none'
45.     },
46.     //x缩放轴
47.     {
48.       type: 'slider',
49.       show: true,
50.       xAxisIndex: [0],
51.       filterMode: 'none',
52.       height: 20
53.     },
54.     {
55.       type: 'inside',
56.       xAxisIndex: [0],
57.       filterMode: 'none'
58.     }
59.   ],
60.   series: [
61.     {
62.       name: '新数据',
63.       symbolSize: function (data) {
64.         //return data[2]/100; // 返回 data 中的第三个值（size）
65.         return 7;
66.       },
67.       data: d1,
68.       type: 'scatter',
69.       itemStyle: {
70.         color: '#5470C6' // 设置第一组数据的颜色
71.       }
72.     },
73.     {
74.       name: '旧数据',
75.       symbolSize: function (data) {
76.         //return data[2] + 5; // 返回 data 中的第三个值（size）
77.         return 7;
78.       },
79.       data: d2,
80.       type: 'scatter',
81.       itemStyle: {
82.         color: '#EE6666' // 设置第二组数据的颜色
83.       }
84.     }
85.   ]
86. }

复制代码

事例3 单正态分布图 singleNormalDistribution

1. // 单正态分布图 singleNormalDistribution
2. /*******************配置参数*******************/
3. // 组间距
4. let interval = 0.1;
5. // 参数实例 [1,2,3,4,5]
6. let da = {{data}}
7. // 标题
8. let title = "这里填写标题"
9. //图表颜色
10. let drawColor = "rgba(19,72,206,0.5)"
12. /*******************计算实体********************/
13. //计算正态曲线
14. function fxNormalDistribution(array, std, mean) {
15.   let valueList = [];
16.   for (let i = 0; i < array.length; i++) {
17.     let ND =
18.       Math.sqrt(2 * Math.PI) *
19.       std *
20.       Math.pow(
21.         Math.E,
22.         -(Math.pow(array[i] - mean, 2) / (2 * Math.pow(std, 2)))
23.       );
24.     valueList.push(ND.toFixed(3));
25.   }
26.   return valueList;
27. }
29. //计算标准差
30. function getStd(data, mean) {
31.   let sumXY = function (x, y) {
32.     return Number(x) + Number(y);
33.   };
34.   let square = function (x) {
35.     return Number(x) * Number(x);
36.   };
37.   let deviations = data.map(function (x) {
38.     return x - mean;
39.   });
40.   return Math.sqrt(deviations.map(square).reduce(sumXY) / (data.length - 1));
41. }
43. //对有序数组求中位数
44. function getMedianSorted(arr) {
45.   // 获取数组长度
46.   let len = arr.length;
48.   // 如果没有元素，返回undefined或你可以返回其他合适的值
49.   if (len === 0) {
50.     return undefined;
51.   }
53.   // 如果只有一个元素，那么它就是中位数
54.   if (len === 1) {
55.     return arr[0];
56.   }
58.   // 如果数组长度是奇数，返回中间的数
59.   if (len % 2 === 1) {
60.     return arr[Math.floor(len / 2)];
61.   }
63.   // 如果数组长度是偶数，返回中间两个数的平均值
64.   else {
65.     let mid1 = arr[len / 2 - 1];
66.     let mid2 = arr[len / 2];
67.     return (mid1 + mid2) / 2.0;
68.   }
69. }
71. function getUniqueColumn(data, index) {
72.   // 检查数据是否为空
73.   if (!data || !Array.isArray(data) || data.length === 0) {
74.     return [];
75.   }
77.   // 如果数据是二维数组
78.   if (Array.isArray(data[0])) {
79.     // 提取指定列并去重
80.     const column = data.map(row => row[index]);
81.     return [...new Set(column)];
82.   }
84.   // 如果数据是对象数组
85.   if (typeof data[0] === 'object') {
86.     // 提取指定列（即对象的属性）并去重
87.     const column = data.map(item => item[index]);
88.     return [...new Set(column)];
89.   }
91.   // 如果数据格式不匹配
92.   return [];
93. }
95. function getInterval(va, xAxisX) {
96.   for (let i = 0; i < xAxisX.length; i++) {
97.     if (xAxisX[i] > va) {
98.       if (i === 0) {
99.         return xAxisX[0].toString();
100.       } else {
101.         return xAxisX[i - 1].toString();
102.       }
103.     }
104.   }
105.   return xAxisX[xAxisX.length - 1].toString();
106. }
108. function extracted(da) {
109.   //获取参数指定的公差,标准值,组间据
110.   da.sort((a, b) => a - b);
111.   let mid = getMedianSorted(da).toFixed(3) * 1.0;
113.   // 计算各项最大值,最小值,均值,以及cpk值,以及数组长度
114.   let length = da.length;
115.   let max = Math.max(...da);
116.   let min = Math.min(...da);
117.   let mean = da.reduce((sum, val) => sum + val, 0) / length;
119.   //依据原始数据重新计算数据X轴
120.   //x轴最大最小前后范围
121.   let dataRangeMinOP = 1;
122.   let dataRangeMaxOP = 1.1;
124.   // 设定区间起始和结束值，以及间距 ，X轴的步距
125.   let start = min - dataRangeMinOP;
126.   let end = max + dataRangeMaxOP;
127.   start = start.toFixed(0) * 1.0;
129.   // 计算区间数量
130.   let numIntervals = Math.ceil((end - start) / interval);
132.   //获取所有区间,以及初始化区间每个区间的频数为0
133.   let xAxis = [];
134.   let barYaxis = new Array(numIntervals).fill(0);
136.   for (let i = start; i <= end; i = i + interval) {
137.     let str = i.toFixed(1).toString();
138.     xAxis.push(str);
139.   }
141.   // 遍历数组并计算频数
142.   da.forEach((value) => {
143.     if (value >= start && value <= end) {
144.       // 找到值所在的区间
145.       let intervalIndex = Math.floor((value - start) / interval);
146.       // 增加该区间的频数
147.       barYaxis[intervalIndex]++;
148.     }
149.   });
151.   //正态曲线计算的基本数据和方法
152.   //计算标准差
153.   let std = getStd(da, mean);
154.   //依据x轴,计算正态分布值
155.   let lineYaxis = fxNormalDistribution(xAxis, std, mean);
156.   //求得分布曲线最大值,用以绘制纵向线
157.   let y1Max = Math.max(...lineYaxis);
159.   let midInterval = getInterval(mid, xAxis);
161.   //定义Y轴
162.   //定义实际数据的频数柱状图
163.   let barDataSet = {
164.     type: "bar",
165.     smooth: true,
166.     xAxisIndex: 0,
167.     yAxisIndex: 0,
168.     areaStyle: {
169.       opacity: 0,
170.     },
171.     markLine: {
172.       silent: true,
173.       label: {
174.         fontSize: 10
175.       },
176.       lineStyle: {
177.         color: "rgb(255,0,0)",
178.       },
179.       data: [],
180.     },
181.     data: barYaxis,
182.     itemStyle: {
183.       normal: {
184.         label: {
185.           formatter: "{c} %",
186.           show: false, //默认显示
187.           position: "top", //在上方显示
188.           textStyle: {
189.             //数值样式
190.             fontSize: 10,
191.           },
192.         },
193.       },
194.     },
195.   };
196.   //计算实际数据的正态分布图
197.   let lineDataSet = {
198.     type: "line",
199.     smooth: true,
200.     xAxisIndex: 0,
201.     yAxisIndex: 1,
202.     areaStyle: {
203.       opacity: 0,
204.     },
205.     markLine: {
206.       silent: true,
207.       label: {
208.         fontSize: 12
209.       },
210.       data: [
211.         [
212.           {
213.             name: "中位数:" + mid,
214.             coord: [midInterval, 0],
215.           },
216.           {
217.             coord: [midInterval, y1Max],
218.           },
219.         ],
220.       ],
221.     },
222.     data: lineYaxis,
223.     itemStyle: {
224.       normal: {
225.         label: {
226.           formatter: "{c} %",
227.           show: false, //开启显示
228.           position: "top", //在上方显示
229.           textStyle: {
230.             //数值样式
231.             fontSize: 10,
232.           },
233.         },
234.       },
235.     },
236.   };
237.   return {xAxis, barDataSet, lineDataSet};
238. }
240. function getOptions() {
241.   x = extracted(da);
242.   return {
243.     color: drawColor,
244.     //工具栏。内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。
245.     toolbox: {
246.       show: true,
247.       feature: {
248.         dataZoom: {
249.           yAxisIndex: "none",
250.         },
251.         dataView: {readOnly: false},
252.         restore: {},
253.         saveAsImage: {},
254.       },
255.     },
256.     title: {
257.       text: title,
258.       left: "center"
259.     },
260.     grid: {
261.       top: 80
262.     },
263.     //提示框组件
264.     tooltip: {
265.       trigger: "axis",
266.       axisPointer: {
267.         type: "shadow",
268.       },
269.     },
270.     //图例
271.     legend: {
272.       right: "0%",
273.       top: "0",
274.       textStyle:
275.         {
276.           fontSize: 12
277.         }
278.     },
279.     xAxis: [
280.       {boundaryGap: true, type: "category", gridIndex: 0, data: x.xAxis},
281.     ],
282.     //定义y轴,2个轴
283.     yAxis: [
284.       {
285.         type: "value", gridIndex: 0, max: function (value) {
286.           return value.max + 5;
287.         }
288.       },
289.       {
290.         type: "value", gridIndex: 0, max: function (value) {
291.           return (value.max + 0.2).toFixed(1);
292.         }
293.       }
294.     ],
295.     series: [
296.       x.barDataSet, x.lineDataSet,
297.     ],
298.   }
299. }
300. return getOptions();

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。