Skip to content

V
vue实现好看的echart排行图表

言程序plus / vue实现好看的echart排行图表
与 Fork 源项目一致

Fork自 inscode / VueJS

通知 1
Star 4
Fork 2
V
vue实现好看的echart排行图表
提交 24d25b1c 编写于 作者: M m0_61243965
浏览文件
操作

Auto Commit

上级 7f5dfd76
隐藏空白更改
内联 并排
Showing with 150 addition and 503 deletion
src/App.vue
浏览文件 @ 24d25b1c
<template>
<div>
<div ref="lineChart" style="height: 400px"></div>
</div>
<div>
<div id="lineChart" style="width:800px;height:600px"></div>
</div>
</template>
<script setup>
import { onMounted } from 'vue';
import { echarts } from 'echarts'
import * as 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
console.log('组件已经挂载')
// 调用其他的方法或请求数据等操作
// 获取 DOM 元素
const chartDom = document.getElementById("lineChart")
// 创建 ECharts 实例
const myChart = echarts.init(chartDom)
// 配置项
var myColor = ['#eb2100', '#eb3600', '#d0570e', '#d0a00e', '#34da62', '#00e9db', '#00c0e9', '#0096f3', '#33CCFF', '#33FFCC'];
const options = {
backgroundColor: '#0e2147',
grid: {
left: '11%',
top: '12%',
right: '0%',
bottom: '8%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {
iconStyle: {
normal: {
color: '#FFFFFF'
}
}
xAxis: [{
show: false,
}],
yAxis: [{
axisTick: 'none',
axisLine: 'none',
offset: '27',
axisLabel: {
textStyle: {
color: '#ffffff',
fontSize: '16',
}
}
},
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: ['南昌转运中心', '广州转运中心', '杭州转运中心', '宁夏转运中心', '兰州转运中心', '南宁转运中心', '长沙转运中心', '武汉转运中心', '合肥转运中心', '贵州转运中心']
}, {
axisTick: 'none',
axisLine: 'none',
axisLabel: {
textStyle: {
color: '#ffffff',
fontSize: '16',
}
},
data: ['10', '9', '8', '7', '6', '5', '4', '3', '2', '1']
}, {
name: '分拨延误TOP 10',
nameGap: '50',
nameTextStyle: {
color: '#ffffff',
fontSize: '16',
},
axisLine: {
lineStyle: {
color: 'rgba(0,0,0,0)'
}
},
data: [{
name: "Jayfee",
value: 666
data: [],
}],
series: [{
name: '条',
type: 'bar',
yAxisIndex: 0,
data: [4, 13, 25, 29, 38, 44, 50, 52, 60, 72],
label: {
normal: {
show: true,
position: 'right',
textStyle: {
color: '#ffffff',
fontSize: '16',
}
}
},
barWidth: 12,
itemStyle: {
normal: {
color: function(params) {
var num = myColor.length;
return myColor[params.dataIndex % num]
},
}
},
z: 2
}, {
name: '白框',
type: 'bar',
yAxisIndex: 1,
barGap: '-100%',
data: [99, 99.5, 99.5, 99.5, 99.5, 99.5, 99.5, 99.5, 99.5, 99.5],
barWidth: 20,
itemStyle: {
normal: {
color: '#0e2147',
barBorderRadius: 5,
}
},
z: 1
}, {
name: "Nancy",
value: 520
}]
}]
name: '外框',
type: 'bar',
yAxisIndex: 2,
barGap: '-100%',
data: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100],
barWidth: 24,
itemStyle: {
normal: {
color: function(params) {
var num = myColor.length;
return myColor[params.dataIndex % num]
},
barBorderRadius: 5,
}
},
z: 0
},
{
name: '外圆',
type: 'scatter',
hoverAnimation: false,
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
yAxisIndex: 2,
symbolSize: 35,
itemStyle: {
normal: {
color: function(params) {
var num = myColor.length;
return myColor[params.dataIndex % num]
},
opacity: 1,
}
},
z: 2
}
]
};
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)
})
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(options)
})
</script>
<style scoped>
header {
line-height: 1.5;
line-height: 1.5;
}
.logo {
display: block;
margin: 0 auto 2rem;
display: block;
margin: 0 auto 2rem;
}
@media (min-width: 1024px) {
header {
display: flex;
place-items: center;
padding-right: calc(var(--section-gap) / 2);
}
.logo {
margin: 0 2rem 0 0;
}
header .wrapper {
display: flex;
place-items: flex-start;
flex-wrap: wrap;
}
header {
display: flex;
place-items: center;
padding-right: calc(var(--section-gap) / 2);
}
.logo {
margin: 0 2rem 0 0;
}
header .wrapper {
display: flex;
place-items: flex-start;
flex-wrap: wrap;
}
}
</style>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或