天天看點

echarts3中使用字元雲報錯_Echarts系列(二):vue2.0使用echarts3&&實作中國地圖&&字元雲...

除了這一步操作,其他跟上邊操作一樣,option配置項改成地圖就行,代碼:

let option = {

title: {

text: '訂單量',

subtext: '純屬虛構',

x: 'center'

},

tooltip: {

trigger: 'item'

},

legend: {

orient: 'vertical',

x: 'left',

data: ['訂單量']

},

dataRange: {

x: 'left',

y: 'bottom',

splitList: [

{ start: 1500 },

{ start: 900, end: 1500 },

{ start: 310, end: 1000 },

{ start: 200, end: 300 },

{ start: 10, end: 200, label: '10 到 200(自定義label)' },

{ start: 5, end: 5, label: '5(自定義特殊顔色)', color: 'black' },

{ end: 10 }

],

color: ['#E0022B', '#E09107', '#A3E00B']

},

toolbox: {

show: true,

orient: 'vertical',

x: 'right',

y: 'center',

feature: {

mark: { show: true },

dataView: { show: true, readOnly: false },

restore: { show: true },

saveAsImage: { show: true }

}

},

roamController: {

show: true,

x: 'right',

mapTypeControl: {

'china': true

}

},

series: [

{

name: '訂單量',

type: 'map',

mapType: 'china',

roam: false,

itemStyle: {

normal: {

label: {

show: true,

textStyle: {

color: "rgb(249, 249, 249)"

}

}

},

emphasis: { label: { show: true } }

},

data: [

{ name: '北京', value: Math.round(Math.random() * 2000) },

{ name: '天津', value: Math.round(Math.random() * 2000) },

{ name: '上海', value: Math.round(Math.random() * 2000) },

{ name: '重慶', value: Math.round(Math.random() * 2000) },

{ name: '河北', value: 0 },

{ name: '河南', value: Math.round(Math.random() * 2000) },

{ name: '雲南', value: 5 },

{ name: '遼甯', value: 305 },

{ name: '黑龍江', value: Math.round(Math.random() * 2000) },

{ name: '湖南', value: 200 },

{ name: '安徽', value: Math.round(Math.random() * 2000) },

{ name: '山東', value: Math.round(Math.random() * 2000) },

{ name: '新疆', value: Math.round(Math.random() * 2000) },

{ name: '江蘇', value: Math.round(Math.random() * 2000) },

{ name: '浙江', value: Math.round(Math.random() * 2000) },

{ name: '江西', value: Math.round(Math.random() * 2000) },

{ name: '湖北', value: Math.round(Math.random() * 2000) },

{ name: '廣西', value: Math.round(Math.random() * 2000) },

{ name: '甘肅', value: Math.round(Math.random() * 2000) },

{ name: '山西', value: Math.round(Math.random() * 2000) },

{ name: '内蒙古', value: Math.round(Math.random() * 2000) },

{ name: '陝西', value: Math.round(Math.random() * 2000) },

{ name: '吉林', value: Math.round(Math.random() * 2000) },

{ name: '福建', value: Math.round(Math.random() * 2000) },

{ name: '貴州', value: Math.round(Math.random() * 2000) },

{ name: '廣東', value: Math.round(Math.random() * 2000) },

{ name: '青海', value: Math.round(Math.random() * 2000) },

{ name: '西藏', value: Math.round(Math.random() * 2000) },

{ name: '四川', value: Math.round(Math.random() * 2000) },

{ name: '甯夏', value: Math.round(Math.random() * 2000) },

{ name: '海南', value: Math.round(Math.random() * 2000) },

{ name: '台灣', value: Math.round(Math.random() * 2000) },

{ name: '香港', value: Math.round(Math.random() * 2000) },

{ name: '澳門', value: Math.round(Math.random() * 2000) }

]

}

]

};