<template>
<div class="ten-excharts">
<div class="echarts-box">
<div class="ten-box" id="ten"></div>
</div>
</div>
</template>
<script>
import * as echarts from 'echarts';
echarts版本需要 "^4.9.0"
import '../../../node_modules/echarts/map/js/china';
export default {
data() {
return {
allList: [150, 230, 224, 218, 135, 147, 260,150, 230, 224, 218, 135, 147, 260],
dateList: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun','Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
sumData: 0
};
},
mounted() {
this.getData();
// this.wuhuMap()
},
methods: {
getData() {
this.$nextTick(() => {
this.getIndex();
});
},
getIndex() {
var myChart = echarts.init(document.getElementById('ten'));
var option = {
title: {
subtext: '订单',
subtextStyle: {
color: '#000000',
fontSize: 12
},
left: '5px'
},
dataZoom: [
{
type: 'inside', //1平移 缩放
throttle: '50', //设置触发视图刷新的频率。单位为毫秒（ms）。
minValueSpan: 6, //用于限制窗口大小的最小值,在类目轴上可以设置为 5 表示 5 个类目
maxValueSpan: 10,
start: 1, //数据窗口范围的起始百分比 范围是：0 ~ 100。表示 0% ~ 100%。
end: 8, //数据窗口范围的结束百分比。范围是：0 ~ 100。
zoomLock: true //如果设置为 true 则锁定选择区域的大小，也就是说，只能平移，不能缩放。
}
],
// 主要用来控制图表四周留白
grid: {
left: '45px',
top: '15%',
right: '45px',
bottom: '32px'
},
// 提示框组件
tooltip: {
trigger: 'axis', //坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
backgroundColor: '#FFF', //提示框浮层的背景颜色。
textStyle: {
color: '#505363'
},
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);',
// axisPointer: {
// //去掉移动的指示线
// type: "none",
// },
// 自定义提示框内容
padding: [10, 15],
formatter: function(params, ticket, callback) {
var text = params[0].data.date + '<br />' + '订单量 (单)' + ': ' + (params[0].data.value || 0);
return text;
}
},
//直角坐标系 grid 中的 x 轴，
xAxis: {
type: 'category', //'category' 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。
// 坐标轴轴线相关设置
axisLine: {
lineStyle: {
color: '#E5E5E5' // 坐标轴线线的颜色。
}
},
// 坐标轴刻度标签
axisLabel: {
// 是否显示坐标刻度标签
show: true,
// 标签文字的颜色
color: '#999'
},
//x轴刻度线设置
axisTick: {
show: false
},
// 类目数据，在类目轴（type: 'category'）中有效。
data: this.dateList
},
//直角坐标系 grid 中的 y 轴，
yAxis: {
type: 'value', //'value' 数值轴，适用于连续数据。
// 坐标轴轴线相关设置
axisLine: {
show: false //y轴线消失
},
// 坐标轴刻度标签(类目,简单说就是x轴上的内容)的相关设置
axisLabel: {
show: true,
// 标签文字的颜色
color: '#999'
},
//y轴刻度线设置
axisTick: {
show: false
},
splitNumber: 4 //坐标轴的分割段数，需要注意的是这个分割段数只是个预估值，最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整.在类目轴中无效。
},
series: [
{
type: 'line',
smooth: true,
data: this.allList,
lineStyle: {
color: '#377CFF',
width: 1
},
// 折线拐点的样式
itemStyle: {
normal: {
color: '#377CFF'
},
emphasis: {
color: '#377CFF'
}
},
symbol: 'circle', //拐点样式
symbolSize: 6 //拐点大小
}
]
};
myChart.setOption(option, true);
},
// 自定义中国地图格式
wuhuMap() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('china_map'));
// 指定相关的配置项和数据
var mapBoxOption = {
tooltip: {
formatter: params => {
// 可以访问this
let data = params.data;
if (data.total) {
return `分布<br/>${data.name}: ${data.total}人`;
} else {
return '';
}
}
},
series: [
{
type: 'map',
mapType: 'china',
label: {
normal: {
show: false, //显示省份标签
textStyle: {
color: 'blue'
} //省份标签字体颜色
},
emphasis: {
//对应的鼠标悬浮效果
show: true,
textStyle: {
color: '#800080'
}
}
},
aspectScale: 0.75,
zoom: 1.2,
itemStyle: {
normal: {
borderWidth: 0.5, //区域边框宽度
borderColor: '#009fe8', //区域边框颜色
areaColor: '#ffefd5' //区域颜色
},
emphasis: {
borderWidth: 0.5,
borderColor: '#4b0082',
areaColor: '#ffdead'
}
},
data: [
{ name: '北京', selected: false, value: 1, total: 1 },
{ name: '天津', selected: false, value: 2, total: 12 },
{ name: '上海', selected: false, value: 3, total: 12 },
{ name: '重庆', selected: false, value: 4, total: 12 },
{ name: '河北', selected: false, value: 5, total: 12 },
{ name: '河南', selected: false, value: 6, total: 12 },
{ name: '云南', selected: false, value: 7, total: 12 },
{ name: '辽宁', selected: false, value: 8, total: 12 },
{ name: '黑龙江', selected: false, value: 9, total: 10 },
{ name: '湖南', selected: false, value: 10, total: 100 },
{ name: '安徽', selected: false, value: 11, total: 100 },
{ name: '山东', selected: false, value: 12, total: 100 },
{ name: '新疆', selected: false, value: 1, total: 0 },
{ name: '江苏', selected: false, value: 14, total: 100 },
{ name: '浙江', selected: false, value: 15, total: 100 },
{ name: '江西', selected: false, value: 16, total: 100 },
{ name: '湖北', selected: false, value: 17, total: 100 },
{ name: '广西', selected: false, value: 18, total: 100 },
{ name: '甘肃', selected: false, value: 19, total: 100 },
{ name: '山西', selected: false, value: 20, total: 100 },
{ name: '内蒙古', selected: false, value: 21, total: 10 },
{ name: '陕西', selected: false, value: 22, total: 23 },
{ name: '吉林', selected: false, value: 23, total: 23 },
{ name: '福建', selected: false, value: 24, total: 23 },
{ name: '贵州', selected: false, value: 25, total: 23 },
{ name: '广东', selected: false, value: 26, total: 23 },
{ name: '青海', selected: false, value: 27, total: 23 },
{ name: '西藏', selected: false, value: 28, total: 23 },
{ name: '四川', selected: false, value: 29, total: 23 },
{ name: '宁夏', selected: false, value: 30, total: 23 },
{ name: '海南', selected: false, value: 31, total: 23 },
{ name: '台湾', selected: false, value: 32, total: 23 },
{ name: '香港', selected: false, value: 33, total: 23 },
{ name: '澳门', selected: false, value: 34, total: 23 }
] //各省地图颜色数据依赖value
}
],
dataRange: {
x: '-1000 px', //图例横轴位置
y: '-1000 px', //图例纵轴位置
splitList: [
{ start: 1, end: 1, label: '北京', color: '#00FF00' },
{ start: 2, end: 2, label: '天津', color: '#0000FF' },
{ start: 3, end: 3, label: '上海', color: '#FFFF00' },
{ start: 4, end: 4, label: '重庆', color: '#00FFFF' },
{ start: 5, end: 5, label: '河北', color: '#FF00FF' },
{ start: 6, end: 6, label: '河南', color: '#C0C0C0' },
{ start: 7, end: 7, label: '云南', color: '#808080' },
{ start: 8, end: 8, label: '辽宁', color: '#800000' },
{ start: 9, end: 9, label: '黑龙江', color: '#808000' },
{ start: 10, end: 10, label: '湖南', color: '#008000' },
{ start: 11, end: 11, label: '安徽', color: '#800080' },
{ start: 12, end: 12, label: '山东', color: '#008080' },
{ start: 13, end: 13, label: '新疆', color: '#000080' },
{ start: 14, end: 14, label: '江苏', color: '#800000' },
{ start: 15, end: 15, label: '浙江', color: '#8B0000' },
{ start: 16, end: 16, label: '江西', color: '#A52A2A' },
{ start: 17, end: 17, label: '湖北', color: '#F08080' },
{ start: 18, end: 18, label: '广西', color: '#FA8072' },
{ start: 19, end: 19, label: '甘肃', color: '#FFA07A' },
{ start: 20, end: 20, label: '山西', color: '#FF4500' },
{ start: 21, end: 21, label: '内蒙古', color: '#FFA500' },
{ start: 22, end: 22, label: '陕西', color: '#DAA520' },
{ start: 23, end: 23, label: '吉林', color: '#EEE8AA' },
{ start: 24, end: 24, label: '福建', color: '#BDB76B' },
{ start: 25, end: 25, label: '贵州', color: '#fad8e8' },
{ start: 26, end: 26, label: '广东', color: '#808000' },
{ start: 27, end: 27, label: '青海', color: '#FFFF00' },
{ start: 28, end: 28, label: '西藏', color: '#556B2F' },
{ start: 29, end: 29, label: '四川', color: '#e4f1d5' },
{ start: 30, end: 30, label: '宁夏', color: '#9ACD32' },
{ start: 31, end: 31, label: '海南', color: '#fad8e9' },
{ start: 32, end: 32, label: '台湾', color: '#fce8cd' },
{ start: 33, end: 33, label: '香港', color: '#dc9bbb' },
{ start: 34, end: 34, label: '澳门', color: '#6B8E23' }
]
} //各省地图颜色；start：值域开始值；end：值域结束值；label：图例名称；color：自定义颜色值；
};
// 使用制定的配置项和数据显示图表
myChart.setOption(mapBoxOption);
// echart图表自适应
window.addEventListener('resize', function() {
myChart.resize();
});
}
}
};
</script>
<style scoped>
.ten-excharts {
padding: 0px 16px;
background: #fff;
}
.ten-box {
height: 330px;
}
</style>
1021
05-19
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
