各种使用echart配置的例子
获取地方的json文件
转动的圈
<template>
<svg class="particle">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,255,0);stop-opacity:0" />
<stop offset="85%" style="stop-color:rgb(255,255,255,0.7);stop-opacity:0.7" />
<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" width="45" height="2">
<animateMotion dur="1.5s" rotate="auto" repeatCount="indefinite">
<mpath xlink:href="#path1"/>
</animateMotion>
</rect>
</svg>
</template>
<script>
export default {
}
</script>
<style scoped>
.particle {
width: 400px;
position: absolute;
height: 100px;
z-index: 0;
}
</style>
一般曲线图例子：
<template>
<div class="h100">
<div class="h100" ref="estate"></div>
</div>
</template>
<script>
export default {
data() {
return {
myChart: null,
b_age_aboard: {
name: [
"工商管理",
"金融学",
"英语",
"会计学",
"经济学",
"国际经济与贸易",
"机械设计",
"日语",
"市场营销",
"土木工程"
],
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: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
},
transitionDuration: 0,
extraCssText: 'font-size: 16px;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 / 10000).toFixed(1);
danwei = "万" + danwei;
}
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: "10%", // Make series be overlap
barCateGoryGap: "10%",
// label: {
// //---图形上的文本标签
// show: true,
// position: "top", //---相对位置
// color: "#fff",
// fontSize: 15
// },
itemStyle: {
//---图形形状
normal: {
color: function(params) {
// var colorList = [
// "rgba(4,226,226,.5)",
// "rgba(4,226,226,.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>
地图模块例子：
<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>
