* {
margin: 0;
padding: 0;
}
#main {
display: flex;
height: 100vh;
width: 100vw;
overflow: hidden;
}
.left {
width: 35%;
}
.middle {
width: 30%;
}
.right {
width: 35%;
}
Vue.config.devtools = false
Vue.config.productionTip = false
new Vue({
el: "#app",
data() {
return {
}
},
mounted() {
this.initChart()
this.initChart2()
this.initChart3()
this.initChart4()
this.initChart5()
},
methods: {
initChart() {
var myChart = echarts.init(this.$refs.chart1);
// 指定图表的配置项和数据
var option = {
grid: {
left: 100,
top: 10
},
xAxis: {
axisLine: {
show: false
},
axisTick: {
show: false
},
splitLine: {
show: false
},
axisLabel: {
show: false
}
},
yAxis: {
axisLine: {
show: false
},
axisTick: {
show: false
},
splitLine: {
show: false
},
axisLabel: {
color: 'blue',
fontWeight: 'bold'
},
data: ["JAVA", "C#", "PYTHON", "GOLANG", "JAVASCRIPT", "PHP"]
},
series: [{
name: '使用人数',
type: 'bar',
data: [5, 20, 36, 10, 10, 20],
color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
offset: 0,
color: 'blue'
},
{
offset: 1,
color: 'skyblue'
}]),
label: {
show: true,
position: 'right',
color: 'blue'
}
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.addEventListener('resize', () => {
myChart.resize()
})
}
, initChart2() {
var myChart = echarts.init(this.$refs.chart2);
// 指定图表的配置项和数据
var option = {
grid: {
right: 100,
top: 10
},
xAxis: {
axisLine: {
show: false
},
axisTick: {
show: false
},
splitLine: {
show: false
},
axisLabel: {
show: false
}
},
yAxis: {
position: "right",
axisLine: {
show: false
},
axisTick: {
show: false
},
splitLine: {
show: false
},
axisLabel: {
color: 'orangered',
fontWeight: 'bold'
},
data: ["JAVA", "C#", "PYTHON", "GOLANG", "JAVASCRIPT", "PHP"]
},
series: [{
name: '使用人数',
type: 'bar',
data: [-5, -20, -36, -10, -10, -20],
color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
offset: 0,
color: 'orange'
},
{
offset: 1,
color: 'orangered'
}]),
label: {
show: true,
position: 'left',
color: 'orangered',
formatter(p) {
return Math.abs(p.value)
}
}
}]
};
myChart.setOption(option);
window.addEventListener('resize', () => {
myChart.resize()
})
}
, initChart3() {
var myChart = echarts.init(this.$refs.chart3);
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line'
}
},
legend: {
icon: "circle",
right: 0
},
grid: {
left: 100,
right: 0,
bottom: 30,
top: 40
},
xAxis: {
axisLine: {
show: false
},
axisTick: {
show: false
},
splitLine: {
show: false
},
axisLabel: {
color: 'lightblue',
fontSize: 16
},
data: ["2015", "2016", "2017", "2018", "2019"]
},
color: ['orangered', 'skyblue'],
yAxis: {
axisLine: {
show: false
},
axisTick: {
show: false
},
splitLine: {
show: false
},
max: 100,
interval: 20,
axisLabel: {
color: 'blue',
formatter(p) {
return p + "%"
},
fontWeight: 'bold'
},
},
series: [{
name: '平均利率',
type: 'line',
data: [30, 46, 60, 50, 70],
smooth: true,
},
{
name: '平均费率',
type: 'line',
data: [40, 26, 40, 32, 35],
smooth: true,
}]
};
myChart.setOption(option);
window.addEventListener('resize', () => {
myChart.resize()
})
}
, initChart4() {
var myChart = echarts.init(this.$refs.chart4);
var option = {
grid: {
left: 100,
right: 0,
bottom: 50,
top: 30
},
xAxis: {
axisLine: {
show: false
},
axisTick: {
show: false
},
splitLine: {
show: false
},
axisLabel: {
color: 'blue',
fontSize: 15,
fontWeight: "bold",
rotate: 30,
margin: 12
},
data: ["招商银行", "2016", "2017", "2018", "2019"]
},
yAxis: {
show: false
},
series: [{
name: '平均利率',
type: 'bar',
label: {
show: true,
position: "top",
color: "blue"
},
color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
offset: 0,
color: '#ada'
},
{
offset: 1,
color: 'green'
}]),
barWidth: 30,
data: [30, 46, 60, 50, 70],
}]
};
myChart.setOption(option);
window.addEventListener('resize', () => {
myChart.resize()
})
}
, async initChart5() {
let { data } = await axios.get('./map/json/province/jiangsu.json')
echarts.registerMap('js', data)
var myChart = echarts.init(this.$refs.chart5);
var option = {
grid: {
left: 0,
right: 0,
bottom: 0,
top: 0
},
visualMap: {
type: 'piecewise',
pieces: [
{ gte: 800, lt: 1000, label: '800~1000人', color: 'skyblue' },
{ gte: 600, lte: 800, label: '600~800人', color: '#aec' },
{ gte: 400, lte: 600, label: '400~600人', color: '#ada' },
{ gte: 200, lte: 400, label: '200~400人', color: '#bcd' },
{ lt: 200, label: '少于200人', color: '#FFCCCC' }
]
},
tooltip: {
formatter(d) {
return d.name + ":" + d.value
}
},
series: [
{
name: "江苏用户",
type: "map",
map: "js",
markPoint: {
symbol: 'pin',
data: [{
name: '江苏',
x: 300,
y: 180
}]
},
data: `南京市、无锡市、徐州市、常州市、苏州市、南通市、连云港市、淮安市、盐城市、扬州市、镇江市、泰州市、宿迁市`.split('、').map(r => ({
name: r,
value: Math.floor(Math.random() * 900) + 100
})),
label: {
show: true,
color: 'orangered'
}
// itemStyle: {
// areaColor: "skyblue"
// }
}
]
};
myChart.setOption(option);
window.addEventListener('resize', () => {
myChart.resize()
})
}
},
})
