vue 用echarts 写中国地图、饼状图、柱形图样式整理
代码实现：
mounted() {
this.ChinaMap();
},
methods:{
ChinaMap(){
console.log('地图数据加载')
// 基于准备好的dom，初始化echarts实例
var myChartContainer = document.getElementById('myChartChina');
var resizeMyChartContainer = function(){
// myChartContainer.style.width=(document.body.offsetWidth/2)+'px'//页面一半的大小
}
resizeMyChartContainer();
var myChartChina = this.$echarts.init(myChartContainer);
// 清空当前实例，移除实例中所有的组件和图表
myChartChina.clear();
function randomData() {
return Math.round(Math.random()*500);
}
// 绘制图表
var optionMap = {
backgroundColor: '#fff',//地图背景色
tooltip: {},
dataRange: {
x: 'left',
y: 'bottom',
splitList: [
{start: 500, color: '#B80909',label:'死亡人数＞30人或直接经济损失＞1000万元'},
{start: 300, end:500, color: '#E64546',label:'死亡人数10~30人或直接经济损失500~1000万元'},
{start: 200, end:300, color: '#FF9985',label:'死亡人数3~10人或直接经济损失100~500万元'},
{start: 0, end: 200, color: '#FFFFFF',label:'死亡人数＜3人或直接经济损失＜100万元'}
],
color: ['#B80909', '#E64546', '#FF9985','#FFFFFF']
},
legend: {
orient: 'vertical',
left: 'left',
data:['']
},
selectedMode: 'single',
series : [
{
name: '',
type: 'map',
mapType: 'china',
itemStyle: {
normal:{
borderColor: 'rgba(0, 0, 0, 0.2)'
},
emphasis:{
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,
borderWidth: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
//这是鼠标悬停的时候的数据
// 根据后端返回的数据自己修改
// tooltip : {
// trigger: 'item',
// formatter: function (params){
// var name = params.name;
// if(data!=null){
// for(var i=0;i<data.length;i++){
// if(name.indexOf(data[i].name)!=-1){
// return(`${name}<br>
// 站点数量：1111<br>
// 正常站点：1111<br>
// 告警站点：1111<br>`)
// }
// }
// }else{
// return name
// }
// }
// },
// 显示地图 上面的 地区原点
showLegendSymbol: false,
label: {
normal: {
show: false
},
// 不显示地区
emphasis: {
show: false
}
},
data:[
{name: '北京',value: randomData() },
{name: '天津',value: randomData() },
{name: '上海',value: randomData() },
{name: '重庆',value: randomData() },
{name: '河北',value: randomData() },
{name: '河南',value: randomData() },
{name: '云南',value: randomData() },
{name: '辽宁',value: randomData() },
{name: '黑龙江',value: randomData() },
{name: '湖南',value: randomData() },
{name: '安徽',value: randomData() },
{name: '山东',value: randomData() },
{name: '新疆',value: randomData() },
{name: '江苏',value: randomData() },
{name: '浙江',value: randomData() },
{name: '江西',value: randomData() },
{name: '湖北',value: randomData() },
{name: '广西',value: randomData() },
{name: '甘肃',value: randomData() },
{name: '山西',value: randomData() },
{name: '内蒙古',value: randomData() },
{name: '陕西',value: randomData() },
{name: '吉林',value: randomData() },
{name: '福建',value: randomData() },
{name: '贵州',value: randomData() },
{name: '广东',value: randomData() },
{name: '青海',value: randomData() },
{name: '西藏',value: randomData() },
{name: '四川',value: randomData() },
{name: '宁夏',value: randomData() },
{name: '海南',value: randomData() },
{name: '台湾',value: randomData() },
{name: '香港',value: randomData() },
{name: '澳门',value: randomData() }
]
}
]
}
myChartChina.setOption(optionMap);
window.onresize=function(){
resizeMyChartContainer();
myChartChina.resize();
}
},
}
代码实现：
<div id="myChart" :style="{width: '65%', height: '300px',background:'#fff'}">
在mounted直接调用方法
progressChart() {
// 基于准备好的dom，初始化echarts实例
let myChartProgress = this.$echarts.init(document.getElementById('myChartProgress'))
myChartProgress.setOption ({
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
legend: {
data: [ '舆情查看率', '火灾次数']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'value',
splitLine:{show: false},//去除网格线
axisTick:{
show:false//不显示坐标轴刻度线
},
axisLine: {
show: false,//不显示坐标轴线
},
axisLabel: {
show: false,//不显示坐标轴上的文字
},
}
],
color:['#2F80E7','#FF7A48'],
yAxis: [
{
type: 'category',
splitLine:{show: false},//去除网格线
axisTick: {
show: false
},
axisLine: {
show: false,//不显示坐标轴线
},
axisLabel: {
show: true,//不显示坐标轴上的文字
},
data: ['北京', '天津', '河北', '山东', '陕西', '宁夏', '辽宁']
}
],
series: [
{
name: '舆情查看率',
type: 'bar',
stack: '总量',
label: {
show: true
},
barWidth : 20,//柱图宽度
data: [320, 302, 341, 374, 390, 450, 420]
},
{
name: '火灾次数',
type: 'bar',
stack: '总量',
barWidth : 20,//柱图宽度
label: {
show: true,
position: 'left'
},
data: [-120, -132, -101, -134, -190, -230, -210]
}
]
});
}
<div id="myChartProgress" :style="{width: '100%', height: '800px',background:'#fff'}"></div>
progressChart() {
// 基于准备好的dom，初始化echarts实例
let myChartProgress = this.$echarts.init(document.getElementById('myChartProgress'))
myChartProgress.setOption ({
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
legend: {
data: [ '舆情查看率', '火灾次数']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'value',
splitLine:{show: false},//去除网格线
axisTick:{
show:false//不显示坐标轴刻度线
},
axisLine: {
show: false,//不显示坐标轴线
},
axisLabel: {
show: false,//不显示坐标轴上的文字
},
}
],
color:['#2F80E7','#FF7A48'],
yAxis: [
{
type: 'category',
splitLine:{show: false},//去除网格线
axisTick: {
show: false
},
axisLine: {
show: false,//不显示坐标轴线
},
axisLabel: {
show: true,//不显示坐标轴上的文字
},
data: ['北京', '天津', '河北', '山东', '陕西', '宁夏', '辽宁']
}
],
series: [
{
name: '舆情查看率',
type: 'bar',
stack: '总量',
label: {
show: true
},
barWidth : 20,//柱图宽度
data: [320, 302, 341, 374, 390, 450, 420]
},
{
name: '火灾次数',
type: 'bar',
stack: '总量',
barWidth : 20,//柱图宽度
label: {
show: true,
position: 'left'
},
data: [-120, -132, -101, -134, -190, -230, -210]
}
]
});
}