Echart图表应用之入门

ECHART图表丰富多彩。
使用方法很简单：
1.添加Echarts.js 通过引用或者自行添加均可
2.选中一块要显示Echarts图表的单元格区域，合并单元格
3.进入公式，名称管理器，给上面单元格命名chart
4.设置一个按钮，添加JavaScript命令
5.添加两行代码：
var chart=echarts.init($('[fgcname="chart"]')[0]);//创建一个图表实例
chart.setOption(option); //生成图表配置
6.进入https://echarts.apache.org/examples/zh/index.html
7.选择你要的图表，复制代码到第5步两行代码中间
8.运行，然后根据自己需要配置代码

1. var a=0.0024437084924;
   
2. var b=-0.094034558804;
   
3. var c=1.33599697143;
   
4. var d=-8.31264992316;
   
5. var e=21.0484055236;
   
6. function func(x) {
   
7.     y=a*Math.pow(x, 4)+b*Math.pow(x, 3)+c*Math.pow(x, 2)+d*Math.pow(x, 1)+e*Math.pow(x, 0);
   
8.     return y;
   
9. }
   
10. var minx=7.3;//设置x轴最小值
    
11. var miny=1.826;//设置y轴最大值
    
12. var maxx=11.6;//设置x轴最大值
    
13. var maxy=1.929;//设置y轴最大值
    
14. var xa=0;
    
15. var ya=0;
    
16. 
    
17. 
    
18. function generateData() {
    
19.     let data = [];
    
20.     for (let i = minx; i <= maxx; i += 0.1) {
    
21.         data.push([i, func(i)]);
    
22.         if(ya<func(i))
    
23. {
    
24. ya=Math.round(func(i)*1000)/1000;
    
25. xa=i;
    
26. 
    
27. }
    
28.     }
    
29.     return data;
    
30. }
    
31. 
    
32. option = {
    
33.     animation: false,
    
34.     grid: {
    
35.         top: 40,
    
36.         left: 50,
    
37.         right: 40,
    
38.         bottom: 50
    
39.     },
    
40. tooltip: {
    
41.         axisPointer: {
    
42.       type: "cross"
    
43.     },
    
44.     show: true
    
45.   },
    
46.     xAxis: {
    
47.         
    
48.         name: 'x',
    
49.         min: minx-1,
    
50.         max: maxx+1,
    
51.         minorTick: {
    
52.             show: true
    
53.         },
    
54.         axisLine:{
    
55.             symbol:['none', 'arrow'],
    
56.             
    
57.         },
    
58.         
    
59.         minorSplitLine: {
    
60.             show: true
    
61.         }
    
62.     },
    
63.     yAxis: {
    
64.         name: 'y',
    
65.         min: miny-0.1,
    
66.         max: maxy+0.1,
    
67.         minorTick: {
    
68.             show: true
    
69.         },
    
70.         axisLine:{
    
71.             symbol:['none', 'arrow'],
    
72.             
    
73.         },
    
74.         minorSplitLine: {
    
75.             show: true
    
76.         }
    
77.     },
    
78.    
    
79.     series: [
    
80.         {
    
81.             type: 'line',
    
82. lineStyle: {
    
83.       color: "rgba(0, 0, 0, 1)",
    
84.     },
    
85.             showSymbol: false,
    
86.             clip: true,
    
87.             data: generateData()
    
88.         },
    
89.          {
    
90.             type: 'line',
    
91.       lineStyle: {
    
92.       color: "rgba(0, 0, 0, 1)",
    
93.       type: "dotted"
    
94.     },
    
95.             showSymbol: true,
    
96.             clip: true,
    
97.             data: [{
    
98. value:[xa,ya],
    
99. label: {
    
100.         show: true,
     
101.          fontSize: 12,
     
102.       }
     
103. },[0,ya]]
     
104.         },
     
105.         {
     
106.             type: 'line',
     
107. lineStyle: {
     
108.       color: "rgba(0, 0, 0, 1)",
     
109.       type: "dotted"
     
110.     },
     
111.            showSymbol: true,
     
112.             clip: true,
     
113.             data: [[xa,ya],[xa,0]]
     
114.         },{
     
115.             type: 'line',
     
116. lineStyle: {
     
117.       color: "rgba(0, 0, 0, 0)",
     
118.     },
     
119.            showSymbol: true,
     
120.       
     
121.             data: [[7.3,1.92],[8.5,1.924],[9.8,1.929],[10.7,1.897],[11.6,1.862]]
     
122.         },
     
123.     ]
     
124.     }
     
125.     ;

复制代码

把以上代码复制到https://echarts.apache.org/examples/zh/editor.html?c=line-function

就可以看到你想要的结果

我的实例，输入数据图表能根据数据变化，这里使用了一个技巧，设置一个隐藏的文本框，编一个对输入的单元格SUM求和公式，然后给这个隐藏文本框添加JavaScript命令上面的代码，这样只要SUM值变化就会执行JS

先下为敬

我也是检测行业  老板还有这样的公式吗

Echart.js这个文件在哪里下载呢？

叶志坤 发表于 2021-6-6 12:47
Echart.js这个文件在哪里下载呢？

https://cdn.jsdelivr.net/npm/echarts-nightly@5.1.2-dev.20210512/dist/echarts.min.js

好的 谢谢了

大佬这个数据怎么引用表格里的数据呢？

谢谢楼主分享。

谢谢楼主分享。