Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
言程序plus
vue实现好看的echart排行图表
提交
7f5dfd76
V
vue实现好看的echart排行图表
项目概览
言程序plus
/
vue实现好看的echart排行图表
与 Fork 源项目一致
Fork自
inscode / VueJS
通知
1
Star
4
Fork
2
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
V
vue实现好看的echart排行图表
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
提交
7f5dfd76
编写于
11月 08, 2023
作者:
M
m0_61243965
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Wed Nov 8 14:51:00 CST 2023 inscode
上级
7a093d7e
变更
3
隐藏空白更改
内联
并排
Showing
3 changed file
with
506 addition
and
14 deletion
+506
-14
.inscode
.inscode
+4
-0
package.json
package.json
+1
-0
src/App.vue
src/App.vue
+501
-14
未找到文件。
.inscode
浏览文件 @
7f5dfd76
run = "npm i && npm run dev"
language = "node"
[deployment]
build = "npm i && npm run build"
...
...
@@ -8,3 +9,6 @@ run = "npm run preview"
PATH = "/root/${PROJECT_DIR}/.config/npm/node_global/bin:/root/${PROJECT_DIR}/node_modules/.bin:${PATH}"
XDG_CONFIG_HOME = "/root/.config"
npm_config_prefix = "/root/${PROJECT_DIR}/.config/npm/node_global"
[debugger]
program = "main.js"
package.json
浏览文件 @
7f5dfd76
...
...
@@ -7,6 +7,7 @@
"preview"
:
"vite preview --port 4173"
},
"dependencies"
:
{
"
echarts
"
:
"
^5.4.3
"
,
"
guess
"
:
"
^1.0.2
"
,
"
vue
"
:
"
^3.2.37
"
},
...
...
src/App.vue
浏览文件 @
7f5dfd76
<
script
setup
>
import
HelloWorld
from
'
./components/HelloWorld.vue
'
import
TheWelcome
from
'
./components/TheWelcome.vue
'
</
script
>
<
template
>
<header>
<img
alt=
"Vue logo"
class=
"logo"
src=
"./assets/logo.svg"
width=
"125"
height=
"125"
/>
<div>
<div
ref=
"lineChart"
style=
"height: 400px"
></div>
</div>
</
template
>
<div
class=
"wrapper"
>
<HelloWorld
msg=
"You did it!"
/>
</div>
</header>
<
script
setup
>
<main>
<TheWelcome
/>
</main>
</
template
>
import
{
onMounted
}
from
'
vue
'
;
import
{
echarts
}
from
'
echarts
'
onMounted
(()
=>
{
console
.
log
(
'
组件已经挂载
'
)
// 调用其他的方法或请求数据等操作
// 获取 DOM 元素
const
chartDom
=
this
.
$refs
.
lineChart
// 创建 ECharts 实例
const
myChart
=
echarts
.
init
(
chartDom
)
// 配置项
const
options
=
{
title
:
{
text
:
'
热点分析
'
,
link
:
'
https://www.baidu.com/s?wd=
'
+
encodeURIComponent
(
'
ECharts
'
),
x
:
'
center
'
,
textStyle
:
{
fontSize
:
23
}
},
backgroundColor
:
'
#F7F7F7
'
,
tooltip
:
{
show
:
true
},
toolbox
:
{
feature
:
{
saveAsImage
:
{
iconStyle
:
{
normal
:
{
color
:
'
#FFFFFF
'
}
}
}
}
},
series
:
[{
name
:
'
热点分析
'
,
type
:
'
wordCloud
'
,
//size: ['9%', '99%'],
sizeRange
:
[
6
,
66
],
//textRotation: [0, 45, 90, -45],
rotationRange
:
[
-
45
,
90
],
//shape: 'circle',
textPadding
:
0
,
autoSize
:
{
enable
:
true
,
minSize
:
6
},
textStyle
:
{
normal
:
{
color
:
function
()
{
return
'
rgb(
'
+
[
Math
.
round
(
Math
.
random
()
*
160
),
Math
.
round
(
Math
.
random
()
*
160
),
Math
.
round
(
Math
.
random
()
*
160
)
].
join
(
'
,
'
)
+
'
)
'
;
}
},
emphasis
:
{
shadowBlur
:
10
,
shadowColor
:
'
#333
'
}
},
data
:
[{
name
:
"
Jayfee
"
,
value
:
666
},
{
name
:
"
Nancy
"
,
value
:
520
}]
}]
};
var
JosnList
=
[];
JosnList
.
push
({
name
:
"
Jayfee
"
,
value
:
666
},
{
name
:
"
Nancy
"
,
value
:
520
},
{
name
:
"
生活资源
"
,
value
:
"
999
"
},
{
name
:
"
供热管理
"
,
value
:
"
888
"
},
{
name
:
"
供气质量
"
,
value
:
"
777
"
},
{
name
:
"
生活用水管理
"
,
value
:
"
688
"
},
{
name
:
"
一次供水问题
"
,
value
:
"
588
"
},
{
name
:
"
交通运输
"
,
value
:
"
516
"
},
{
name
:
"
城市交通
"
,
value
:
"
515
"
},
{
name
:
"
环境保护
"
,
value
:
"
483
"
},
{
name
:
"
房地产管理
"
,
value
:
"
462
"
},
{
name
:
"
城乡建设
"
,
value
:
"
449
"
},
{
name
:
"
社会保障与福利
"
,
value
:
"
429
"
},
{
name
:
"
社会保障
"
,
value
:
"
407
"
},
{
name
:
"
文体与教育管理
"
,
value
:
"
406
"
},
{
name
:
"
公共安全
"
,
value
:
"
406
"
},
{
name
:
"
公交运输管理
"
,
value
:
"
386
"
},
{
name
:
"
出租车运营管理
"
,
value
:
"
385
"
},
{
name
:
"
供热管理
"
,
value
:
"
375
"
},
{
name
:
"
市容环卫
"
,
value
:
"
355
"
},
{
name
:
"
自然资源管理
"
,
value
:
"
355
"
},
{
name
:
"
粉尘污染
"
,
value
:
"
335
"
},
{
name
:
"
噪声污染
"
,
value
:
"
324
"
},
{
name
:
"
土地资源管理
"
,
value
:
"
304
"
},
{
name
:
"
物业服务与管理
"
,
value
:
"
304
"
},
{
name
:
"
医疗卫生
"
,
value
:
"
284
"
},
{
name
:
"
粉煤灰污染
"
,
value
:
"
284
"
},
{
name
:
"
占道
"
,
value
:
"
284
"
},
{
name
:
"
供热发展
"
,
value
:
"
254
"
},
{
name
:
"
农村土地规划管理
"
,
value
:
"
254
"
},
{
name
:
"
生活噪音
"
,
value
:
"
253
"
},
{
name
:
"
供热单位影响
"
,
value
:
"
253
"
},
{
name
:
"
城市供电
"
,
value
:
"
223
"
},
{
name
:
"
房屋质量与安全
"
,
value
:
"
223
"
},
{
name
:
"
大气污染
"
,
value
:
"
223
"
},
{
name
:
"
房屋安全
"
,
value
:
"
223
"
},
{
name
:
"
文化活动
"
,
value
:
"
223
"
},
{
name
:
"
拆迁管理
"
,
value
:
"
223
"
},
{
name
:
"
公共设施
"
,
value
:
"
223
"
},
{
name
:
"
供气质量
"
,
value
:
"
223
"
},
{
name
:
"
供电管理
"
,
value
:
"
223
"
},
{
name
:
"
燃气管理
"
,
value
:
"
152
"
},
{
name
:
"
教育管理
"
,
value
:
"
152
"
},
{
name
:
"
医疗纠纷
"
,
value
:
"
152
"
},
{
name
:
"
执法监督
"
,
value
:
"
152
"
},
{
name
:
"
设备安全
"
,
value
:
"
152
"
},
{
name
:
"
政务建设
"
,
value
:
"
152
"
},
{
name
:
"
县区、开发区
"
,
value
:
"
152
"
},
{
name
:
"
宏观经济
"
,
value
:
"
152
"
},
{
name
:
"
教育管理
"
,
value
:
"
112
"
},
{
name
:
"
社会保障
"
,
value
:
"
112
"
},
{
name
:
"
生活用水管理
"
,
value
:
"
112
"
},
{
name
:
"
物业服务与管理
"
,
value
:
"
112
"
},
{
name
:
"
分类列表
"
,
value
:
"
112
"
},
{
name
:
"
农业生产
"
,
value
:
"
112
"
},
{
name
:
"
二次供水问题
"
,
value
:
"
112
"
},
{
name
:
"
城市公共设施
"
,
value
:
"
92
"
},
{
name
:
"
拆迁政策咨询
"
,
value
:
"
92
"
},
{
name
:
"
物业服务
"
,
value
:
"
92
"
},
{
name
:
"
物业管理
"
,
value
:
"
92
"
},
{
name
:
"
社会保障保险管理
"
,
value
:
"
92
"
},
{
name
:
"
低保管理
"
,
value
:
"
92
"
},
{
name
:
"
文娱市场管理
"
,
value
:
"
72
"
},
{
name
:
"
城市交通秩序管理
"
,
value
:
"
72
"
},
{
name
:
"
执法争议
"
,
value
:
"
72
"
},
{
name
:
"
商业烟尘污染
"
,
value
:
"
72
"
},
{
name
:
"
占道堆放
"
,
value
:
"
71
"
},
{
name
:
"
地上设施
"
,
value
:
"
71
"
},
{
name
:
"
水质
"
,
value
:
"
71
"
},
{
name
:
"
无水
"
,
value
:
"
71
"
},
{
name
:
"
供热单位影响
"
,
value
:
"
71
"
},
{
name
:
"
人行道管理
"
,
value
:
"
71
"
},
{
name
:
"
主网原因
"
,
value
:
"
71
"
},
{
name
:
"
集中供热
"
,
value
:
"
71
"
},
{
name
:
"
客运管理
"
,
value
:
"
71
"
},
{
name
:
"
国有公交(大巴)管理
"
,
value
:
"
71
"
},
{
name
:
"
工业粉尘污染
"
,
value
:
"
71
"
},
{
name
:
"
治安案件
"
,
value
:
"
71
"
},
{
name
:
"
压力容器安全
"
,
value
:
"
71
"
},
{
name
:
"
身份证管理
"
,
value
:
"
71
"
},
{
name
:
"
群众健身
"
,
value
:
"
41
"
},
{
name
:
"
工业排放污染
"
,
value
:
"
41
"
},
{
name
:
"
破坏森林资源
"
,
value
:
"
41
"
},
{
name
:
"
市场收费
"
,
value
:
"
41
"
},
{
name
:
"
生产资金
"
,
value
:
"
41
"
},
{
name
:
"
生产噪声
"
,
value
:
"
41
"
},
{
name
:
"
农村低保
"
,
value
:
"
41
"
},
{
name
:
"
劳动争议
"
,
value
:
"
41
"
},
{
name
:
"
劳动合同争议
"
,
value
:
"
41
"
},
{
name
:
"
劳动报酬与福利
"
,
value
:
"
41
"
},
{
name
:
"
医疗事故
"
,
value
:
"
21
"
},
{
name
:
"
停供
"
,
value
:
"
21
"
},
{
name
:
"
基础教育
"
,
value
:
"
21
"
},
{
name
:
"
职业教育
"
,
value
:
"
21
"
},
{
name
:
"
物业资质管理
"
,
value
:
"
21
"
},
{
name
:
"
拆迁补偿
"
,
value
:
"
21
"
},
{
name
:
"
设施维护
"
,
value
:
"
21
"
},
{
name
:
"
市场外溢
"
,
value
:
"
11
"
},
{
name
:
"
占道经营
"
,
value
:
"
11
"
},
{
name
:
"
树木管理
"
,
value
:
"
11
"
},
{
name
:
"
农村基础设施
"
,
value
:
"
11
"
},
{
name
:
"
无水
"
,
value
:
"
11
"
},
{
name
:
"
供气质量
"
,
value
:
"
11
"
},
{
name
:
"
停气
"
,
value
:
"
11
"
},
{
name
:
"
市政府工作部门(含部门管理机构、直属单位)
"
,
value
:
"
11
"
},
{
name
:
"
燃气管理
"
,
value
:
"
11
"
},
{
name
:
"
市容环卫
"
,
value
:
"
11
"
},
{
name
:
"
新闻传媒
"
,
value
:
"
11
"
},
{
name
:
"
人才招聘
"
,
value
:
"
11
"
},
{
name
:
"
市场环境
"
,
value
:
"
11
"
},
{
name
:
"
行政事业收费
"
,
value
:
"
11
"
},
{
name
:
"
食品安全与卫生
"
,
value
:
"
11
"
},
{
name
:
"
城市交通
"
,
value
:
"
11
"
},
{
name
:
"
房地产开发
"
,
value
:
"
11
"
},
{
name
:
"
房屋配套问题
"
,
value
:
"
11
"
},
{
name
:
"
物业服务
"
,
value
:
"
11
"
},
{
name
:
"
物业管理
"
,
value
:
"
11
"
},
{
name
:
"
占道
"
,
value
:
"
11
"
},
{
name
:
"
园林绿化
"
,
value
:
"
11
"
},
{
name
:
"
户籍管理及身份证
"
,
value
:
"
11
"
},
{
name
:
"
公交运输管理
"
,
value
:
"
11
"
},
{
name
:
"
公路(水路)交通
"
,
value
:
"
11
"
},
{
name
:
"
房屋与图纸不符
"
,
value
:
"
11
"
},
{
name
:
"
有线电视
"
,
value
:
"
11
"
},
{
name
:
"
社会治安
"
,
value
:
"
11
"
},
{
name
:
"
林业资源
"
,
value
:
"
11
"
},
{
name
:
"
其他行政事业收费
"
,
value
:
"
11
"
},
{
name
:
"
经营性收费
"
,
value
:
"
11
"
},
{
name
:
"
食品安全与卫生
"
,
value
:
"
11
"
},
{
name
:
"
体育活动
"
,
value
:
"
11
"
},
{
name
:
"
有线电视安装及调试维护
"
,
value
:
"
11
"
},
{
name
:
"
低保管理
"
,
value
:
"
11
"
},
{
name
:
"
劳动争议
"
,
value
:
"
11
"
},
{
name
:
"
社会福利及事务
"
,
value
:
"
11
"
},
{
name
:
"
一次供水问题
"
,
value
:
"
11
"
});
option
.
series
[
0
].
data
=
JosnList
;
//myChart.setOption(option);
myChart
.
on
(
'
click
'
,
function
(
params
)
{
//alert((params.name));
window
.
open
(
'
https://www.baidu.com/s?wd=
'
+
encodeURIComponent
(
params
.
name
));
});
// 使用刚指定的配置项和数据显示图表。
myChart
.
setOption
(
options
)
})
</
script
>
<
style
scoped
>
header
{
line-height
:
1.5
;
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录