Echart图表应用之入门

amtath

本帖最后由 lovert 于 2021-6-6 17:45 编辑

image.png962717895.png

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.运行，然后根据自己需要配置代码

var a=0.0024437084924;
var b=-0.094034558804;
var c=1.33599697143;
var d=-8.31264992316;
var e=21.0484055236;
function func(x) {
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);
return y;
}
var minx=7.3;//设置x轴最小值
var miny=1.826;//设置y轴最大值
var maxx=11.6;//设置x轴最大值
var maxy=1.929;//设置y轴最大值
var xa=0;
var ya=0;
function generateData() {
let data = [];
for (let i = minx; i <= maxx; i += 0.1) {
data.push([i, func(i)]);
if(ya<func(i))
{
ya=Math.round(func(i)*1000)/1000;
xa=i;
}
}
return data;
}
option = {
animation: false,
grid: {
top: 40,
left: 50,
right: 40,
bottom: 50
},
tooltip: {
axisPointer: {
type: "cross"
},
show: true
},
xAxis: {
name: 'x',
min: minx-1,
max: maxx+1,
minorTick: {
show: true
},
axisLine:{
symbol:['none', 'arrow'],
},
minorSplitLine: {
show: true
}
},
yAxis: {
name: 'y',
min: miny-0.1,
max: maxy+0.1,
minorTick: {
show: true
},
axisLine:{
symbol:['none', 'arrow'],
},
minorSplitLine: {
show: true
}
},
series: [
{
type: 'line',
lineStyle: {
color: "rgba(0, 0, 0, 1)",
},
showSymbol: false,
clip: true,
data: generateData()
},
{
type: 'line',
lineStyle: {
color: "rgba(0, 0, 0, 1)",
type: "dotted"
},
showSymbol: true,
clip: true,
data: [{
value:[xa,ya],
label: {
show: true,
fontSize: 12,
}
},[0,ya]]
},
{
type: 'line',
lineStyle: {
color: "rgba(0, 0, 0, 1)",
type: "dotted"
},
showSymbol: true,
clip: true,
data: [[xa,ya],[xa,0]]
},{
type: 'line',
lineStyle: {
color: "rgba(0, 0, 0, 0)",
},
showSymbol: true,
data: [[7.3,1.92],[8.5,1.924],[9.8,1.929],[10.7,1.897],[11.6,1.862]]
},
]
}
;

复制代码

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

就可以看到你想要的结果

lovert · lovert

本帖最后由 lovert 于 2021-6-6 11:08 编辑

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

amtath · amtath

先下为敬

叶志坤 · 叶志坤

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

叶志坤 · 叶志坤

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

lovert · lovert

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

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

叶志坤 · 叶志坤

好的谢谢了

鲁磊 · 鲁磊

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

a87978063 · a87978063

谢谢楼主分享。

邢台用友队长 · 邢台用友队长

谢谢楼主分享。

		自动登录	找回密码
密码			立即注册

[资源分享] Echart图表应用之入门

评分

12 个回复

活字格高级认证

圣诞拼拼乐

微信认证勋章

悬赏达人

活字格认证