Examples of various configurations using Echart
www.makeapie.com/explore.htm…
Get the LOCAL JSON file
Datav.aliyun.com/tools/atlas…
Rotating ring
<template> <svg class="particle"> <defs> <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" Style = "stop - color: RGB (255255255, 0); Opacity :0" /> <stop offset="85%" style="stop-color: RGB (255,255,255,0.7); Opacity :0 "/> <stop offset="100%" style="stop-color: RGB (255,255,255,0.9); Stop-opacity :0.9" /> </linearGradient> </defs> <path ID ="path1" d="M5.022, 35.857s152.781-66.334,371,101.213" Fill ="none" pathLength="1000" stroke-width="3" /> <rect style="stroke-width:5" fill="url(#grad1)" x="0" y="0" rx="5" ry="5" Rotate ="auto" repeatCount="indefinite"> <mpath xlink:href="#path1"/> width="45" height="2"> <animateMotion dur="1.5s" rotate="auto" repeatCount="indefinite"> </animateMotion> </rect> </svg> </template> <script> export default { } </script> <style scoped> .particle { width: 400px; position: absolute; height: 100px; z-index: 0; } </style>Copy the codeExamples of general graphs:
<template> <div class="h100"> <div class="h100" ref="estate"></div> </div> </template> <script> export default { data() { return { myChart: null, b_age_aboard: { name: [" business management ", "finance", "English", "accounting", "economics", "international economy and trade," "mechanical design", "Japanese", "marketing", "civil engineering"], value: [1419, 1326, 1412, 1110, 1013, 907, 661, 657, 710, 789] } // imgUrl: this.config.isShowImgUrl ? require('@/assets/img/board/7.png') : '' } }, props: ["initData", "config", "active"], mounted() { this.init() }, beforeDestroy() { this.myChart.dispose() }, components: {}, methods: { init() { if (this.initData) { this.estateChart("estate", this.initData, this.config) } else { this.estateChart("estate", this.b_age_aboard, this.config) } }, estateChart(id, data, config_chart) { const colorList = this.config.colorList || ["#ffffbd", "#ffffbd", "#ffd55c", "rgba(208, 188, 132, 0.5)", "Rgba (255, 255, 0, 0.85)"]; this.myChart = this.$echarts.init(this.$refs.estate) let xData = data.name let y1Data = data.value let option = { Tooltip: {trigger: "axis", axisPointer: {// Axes trigger valid type: "Shadow" / / default is straight line, optional for: 'the line' | 'shadow'}, transitionDuration: 0, extraCssText: 'the font - size: 16 px; line-height: 20px; ', }, grid: { left: this.config.left ? this.config.left : "10%", right: this.config.right ? this.config.right : "10%", bottom: this.config.bottom ? this.config.bottom : "20%", top: this.config.top ? this.config.top : "10%", containLabel: false }, animation: false, xAxis: [{ type: "category", data: xData, axisTick: { alignWithLabel: true }, nameTextStyle: { color: "#82b0ec" }, axisLine: { show: false, lineStyle: { color: "#82b0ec" } }, axisLabel: { textStyle: { // color: "#05F7EB", color: this.config.xLabelColor || "#fff", fontSize: 15 }, margin: 30, rotate: this.config.rotate ? this.config.rotate : 0, formatter: (name) => { if (name.length > 5 && this.config.isBreak) { return `${name.slice(0, 5)}\n${name.slice(5)}` } else { return name } } } }], yAxis: [{ show: false, type: "value", axisLabel: { textStyle: { color: "#fff" } }, splitLine: { lineStyle: { color: "#0c2c5a" } }, axisLine: { show: false } }], series: [{ name: "", type: "pictorialBar", symbolSize: [35, 10], symbolOffset: [0, -6], symbolPosition: "end", z: 12, // "barWidth": "0", label: { normal: { show: true, position: "top", // "formatter": "{c}%" color: "#fff", fontSize: 15, formatter: params => { let danwei = this.config.danwei || ''; let data = Number(params.data); if (data >= 100000) { data = (data / } return data + danwei;}}}, tooltip: {show: false}, color: colorList[0], barMinHeight: this.config.barMinHeight || 0, data: y1Data }, { name: "", type: "pictorialBar", symbolSize: [35, 10], symbolOffset: [0, 7], // "barWidth": "20", z: 12, tooltip: { show: false }, color: colorList[1], data: y1Data }, { name: "", type: "pictorialBar", symbolSize: [50, 15], symbolOffset: [0, 12], z: 10, tooltip: { show: false }, itemStyle: { normal: { color: "transparent", borderColor: colorList[2], borderType: "solid", borderWidth: 1 } }, barMinWidth: 2, data: y1Data }, { name: "", type: "pictorialBar", symbolSize: [70, 20], symbolOffset: [0, 18], z: 10, tooltip: { show: false }, itemStyle: { normal: { color: "transparent", borderColor: colorList[3], borderType: "solid", borderWidth: 2 } }, data: y1Data }, { type: "bar", //silent: true, barWidth: "35", barMinHeight: this.config.barMinHeight || 0, barGap: "%", // Make series be overlap barCateGoryGap:" %", // label: {// //--- text label on graphics // show: true, // position: "Top", / / - relative position / / color: "# FFF", / / fontSize: 15 / /}, itemStyle: {/ / - graphic shape normal: {color: The function (params) {/ / var colorList = [/ / "rgba (4226226, 5)," / / "rgba (4226226, 5)." // "rgba(4,226,226,.5)" //] // return colorList[params.dataindex] return colorList[4]}}}, data: y1Data }] } this.myChart.setOption(option) window.addEventListener("resize", () => { if (this.myChart) { this.myChart.resize() } }) } } } </script> <style scoped> </style>Copy the codeMap module examples:
<template>
<div class="h100">
<div class="h100" ref="estate"></div>
</div>
</template>
<script>
import chancheng from "@/utils/foshan"
import { imgList } from "@/utils/img"
export default {
data() {
return {
myChart: null,
b_age_aboard: {}
// imgUrl: this.config.isShowImgUrl ? require('@/assets/img/board/7.png') : ''
}
},
props: ["initData", "config"],
mounted() {
this.init()
},
beforeDestroy() {
this.myChart.dispose()
},
components: {},
methods: {
init() {
// console.log(this.initData)
if (this.initData) {
this.estateChart("estate", this.initData, this.config)
} else {
this.estateChart("estate", this.b_age_aboard, this.config)
}
},
estateChart(id, data, config_chart) {
this.myChart = this.$echarts.init(this.$refs.estate)
this.$echarts.registerMap("chancheng", chancheng)
let arr = []
data.forEach((item, index) => {
let rr = []
rr.push(item)
arr[index] = rr
})
let dataObj = data
let geoCoordMap = {
石湾: [113.10785, 22.99679],
祖庙: [113.11334609985352, 23.03803398912686],
张槎: [113.06184768676756, 23.03503251484256],
南庄: [113.01481246948241, 22.987473928553428]
}
var maxSize4Pin = 100,
minSize4Pin = 20
var max = 480,
min = 9 // todo
var convertData = function(data) {
var res = []
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name]
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value)
})
}
}
return res
}
let option = {
title: {
top: 10,
left: "center"
},
tooltip: {
trigger: "item",
formatter: function(params) {
if (typeof params.value[2] == "undefined") {
return params.name + "<br/>" + params.marker + params.value
} else {
return params.name + " : " + params.value[2]
}
},
transitionDuration: 0,
extraCssText: 'font-size: 16px;line-height: 20px;',
},
geo: {
map: "chancheng",
right: "30",
zoom: 1.48,
roam: true,
// top: 120,
label: {
normal: {
show: false,
fontSize: "12",
color: "#fff"
},
formatter: params => {
// console.log(params)
},
emphasis: {
show: false,
color: "white"
}
},
itemStyle: {
normal: {
borderColor: "rgba(147, 235, 248, 1)",
// borderWidth: 1,
areaColor: "rgba(255,255,255,.1)",
shadowBlur: 1
},
emphasis: {
areaColor: "rgba(255,255,255,.2)"
}
}
},
series: [
{
type: "map",
map: "chancheng",
geoIndex: 0, //默认情况下，map series 会自己生成内部专用的 geo 组件。但是也可以用这个 geoIndex 指定一个 geo 组件。这样的话，map 和 其他 series（例如散点图）就可以共享一个 geo 组件了。并且，geo 组件的颜色也可以被这个 map series
aspectScale: 0.75, //长宽比
showLegendSymbol: false, // 存在legend时显示
label: {
normal: {
show: true
// formatter: params => {
// console.log(params)
// }
},
emphasis: {
show: false,
textStyle: {
color: "#fff"
}
}
},
roam: true,
itemStyle: {
normal: {
areaColor: "#031525",
borderColor: "#FFFFFF"
},
emphasis: {
areaColor: "rgba(20,56,79,0.85)"
}
},
animation: false,
data: dataObj
},
{
name: "点",
type: "scatter",
coordinateSystem: "geo",
symbol: imgList[1], //气泡
symbolSize: this.config.symbolSize
? this.config.symbolSize[0]
: [35, 40],
label: {
normal: {
formatter: params => {
return params.name + "\n" + params.value[2]
},
position: "bottom",
show: true,
color: "#fff",
lineHeight: 16,
fontSize: 15
}
},
itemStyle: {
normal: {
color: "#bacaa0" //标志颜色
}
},
zlevel: 6,
data: convertData(arr[0])
},
{
name: "点",
type: "scatter",
coordinateSystem: "geo",
symbol: imgList[2], //气泡
symbolSize: this.config.symbolSize
? this.config.symbolSize[1]
: [35, 40],
label: {
normal: {
formatter: params => {
return params.name + "\n" + params.value[2]
},
position: "bottom",
show: true,
color: "#fff",
lineHeight: 16,
fontSize: 15
}
},
itemStyle: {
normal: {
color: "#bacaa0" //标志颜色
}
},
zlevel: 7,
data: convertData(arr[1])
},
{
name: "点",
type: "scatter",
coordinateSystem: "geo",
symbol: imgList[3], //气泡
symbolSize: this.config.symbolSize
? this.config.symbolSize[2]
: [30, 35],
label: {
normal: {
formatter: params => {
return params.name + "\n" + params.value[2]
},
position: "bottom",
show: true,
color: "#fff",
lineHeight: 16,
fontSize: 15
}
},
itemStyle: {
normal: {
color: "#bacaa0" //标志颜色
}
},
zlevel: 8,
data: convertData(arr[2])
},
{
name: "点",
type: "scatter",
coordinateSystem: "geo",
symbol: imgList[0], //气泡
symbolSize: this.config.symbolSize
? this.config.symbolSize[3]
: [25, 30],
label: {
normal: {
formatter: params => {
return params.name + "\n" + params.value[2]
},
position: "bottom",
show: true,
color: "#fff",
lineHeight: 16,
fontSize: 15
}
},
itemStyle: {
normal: {
color: "#bacaa0" //标志颜色
}
},
zlevel: 9,
data: convertData(arr[3])
}
// {
// name: "Top 5",
// type: "effectScatter",
// coordinateSystem: "geo",
// data: convertData(data),
// symbolSize: function(val) {
// return 12
// },
// showEffectOn: "render",
// rippleEffect: {
// brushType: "stroke"
// },
// hoverAnimation: true,
// label: {
// normal: {
// formatter: params => {
// return params.name + "\n" + params.value[2]
// },
// position: "bottom",
// show: true,
// color: "#fff",
// lineHeight: 15
// }
// },
// itemStyle: {
// normal: {
// color: "#467a7c",
// shadowBlur: 10,
// shadowColor: "#467a7c"
// }
// },
// zlevel: 1
// }
]
}
this.myChart.setOption(option)
// var that = this
// if (dataObj.length > 2) {
// function Play() {
// that.myChart.dispatchAction({
// type: "downplay",
// seriesIndex: 0
// })
// that.myChart.dispatchAction({
// type: "highlight",
// seriesIndex: 0,
// dataIndex: hourIndex
// })
// that.myChart.dispatchAction({
// type: "showTip",
// seriesIndex: 0,
// dataIndex: hourIndex
// })
// hourIndex++
// if (hourIndex >= dataObj.length) {
// hourIndex = 0
// }
// }
// var hourIndex = 0
// Play()
// var fhourTime = setInterval(Play, 3000)
// //鼠标移入停止轮播
// this.myChart.on("mousemove", function(e) {
// clearInterval(fhourTime)
// })
// //鼠标移出恢复轮播
// this.myChart.on("mouseout", function() {
// fhourTime = setInterval(Play, 3000)
// })
// }
// this.myChart.on("click", params => {
// if (params.name) {
// if (this.initData.regionData[params.name]) {
// this.$store.commit("updatadrawerTitle", params.name)
// this.$store.commit("updataisOpenDrawer", true)
// this.$store.commit("updatadirection", "ltr")
// let dataArr = this.initData.regionData[params.name]
// let name = []
// let value = []
// dataArr.map((v, i) => {
// name.push(v.name)
// value.push(v.value)
// })
// let dataobj = {
// name: name,
// value: value
// }
// this.$store.commit("updatadrawerData", dataobj)
// } else {
// this.$message({
// message: "没有数据",
// type: "info"
// })
// }
// }
// })
window.addEventListener("resize", () => {
if (this.myChart) {
this.myChart.resize()
}
})
}
}
}
</script>
<style scoped>
</style>
Copy the code