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> <template>
<div> <div>
<div ref="lineChart" style="height: 400px"></div> <div id="lineChart" style="width:800px;height:600px"></div>
</div> </div>
</template> </template>
<script setup> <script setup>
import { onMounted } from 'vue'; import { onMounted } from 'vue';
import { echarts } from 'echarts' import * as echarts from "echarts";
onMounted(() => { onMounted(() => {
console.log('组件已经挂载') console.log('组件已经挂载')
// 调用其他的方法或请求数据等操作 // 调用其他的方法或请求数据等操作
// 获取 DOM 元素 // 获取 DOM 元素
const chartDom = this.$refs.lineChart const chartDom = document.getElementById("lineChart")
// 创建 ECharts 实例 // 创建 ECharts 实例
const myChart = echarts.init(chartDom) const myChart = echarts.init(chartDom)
// 配置项 // 配置项
const options = { var myColor = ['#eb2100', '#eb3600', '#d0570e', '#d0a00e', '#34da62', '#00e9db', '#00c0e9', '#0096f3', '#33CCFF', '#33FFCC'];
title: { const options = {
text: '热点分析', backgroundColor: '#0e2147',
link: 'https://www.baidu.com/s?wd=' + encodeURIComponent('ECharts'), grid: {
x: 'center', left: '11%',
textStyle: { top: '12%',
fontSize: 23 right: '0%',
} bottom: '8%',
containLabel: true
},
backgroundColor: '#F7F7F7',
tooltip: {
show: true
}, },
toolbox: { xAxis: [{
feature: { show: false,
saveAsImage: { }],
iconStyle: { yAxis: [{
normal: { axisTick: 'none',
color: '#FFFFFF' 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: { data: ['南昌转运中心', '广州转运中心', '杭州转运中心', '宁夏转运中心', '兰州转运中心', '南宁转运中心', '长沙转运中心', '武汉转运中心', '合肥转运中心', '贵州转运中心']
normal: { }, {
color: function() { axisTick: 'none',
return 'rgb(' + [ axisLine: 'none',
Math.round(Math.random() * 160), axisLabel: {
Math.round(Math.random() * 160), textStyle: {
Math.round(Math.random() * 160) color: '#ffffff',
].join(',') + ')'; fontSize: '16',
} }
}, },
emphasis: { data: ['10', '9', '8', '7', '6', '5', '4', '3', '2', '1']
shadowBlur: 10, }, {
shadowColor: '#333' name: '分拨延误TOP 10',
nameGap: '50',
nameTextStyle: {
color: '#ffffff',
fontSize: '16',
},
axisLine: {
lineStyle: {
color: 'rgba(0,0,0,0)'
} }
}, },
data: [{ data: [],
name: "Jayfee", }],
value: 666 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", name: '外框',
value: 520 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.setOption(options)
myChart.on('click', function (params) { })
//alert((params.name));
window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name));
});
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(options)
})
</script> </script>
<style scoped> <style scoped>
header { header {
line-height: 1.5; line-height: 1.5;
} }
.logo { .logo {
display: block; display: block;
margin: 0 auto 2rem; margin: 0 auto 2rem;
} }
@media (min-width: 1024px) { @media (min-width: 1024px) {
header { header {
display: flex; display: flex;
place-items: center; place-items: center;
padding-right: calc(var(--section-gap) / 2); padding-right: calc(var(--section-gap) / 2);
} }
.logo { .logo {
margin: 0 2rem 0 0; margin: 0 2rem 0 0;
} }
header .wrapper { header .wrapper {
display: flex; display: flex;
place-items: flex-start; place-items: flex-start;
flex-wrap: wrap; flex-wrap: wrap;
} }
} }
</style> </style>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或