vue組件-echarts地圖顯示柱狀圖并給柱狀圖添加點擊事件（支持自定義地圖）
效果如下所示：
參考檔案：
這是參考的檔案
起因：
最近有朋友有需求需要用echarts，在地圖上顯示柱狀圖，并添加點擊事件，網上有demo,但是比較老，用原生html+js寫的，并且是非組件性質，使用起來并不友好，故而，寫了這個echarts組件
Git地址 開源不易 求star 謝謝了
配置檔案：
在git地址拉下代碼 ，echarts 組件地址是 src\components\echarts
把組件放到自己專案里 正常參考
使用方式
默認是北京地圖 資料自己胡亂寫的， 實際應用的時候可按如下方式傳參： 詳情見demo
<echarts-demo
:areaData="areaData"
:option="option"
:cityConfig="cityConfig"
:areaItems="areaItems"
></echarts-demo>
傳參格式 請參照如下配置
areaData : [{ //與業務結合
{
areaName: "豐縣", // 地域名字
DateItems: [ // 柱狀圖配置
{
title: "標題1", //柱狀圖 x軸標題名字
value: "10" // 數值
},
{
title: "標題2",
value: "20"
},
{
title: "標題3",
value: "30"
}
]
},
}],
option: {
backgroundColor: "#02AFDB",
tooltip: {},
geo: {
map: "徐州市",
roam: true,
label: {
normal: {
show: true,
textStyle: {
color: "rgba(0,0,0,0.4)"
}
}
},
itemStyle: {
normal: {
borderColor: "rgba(0, 0, 0, 0.2)"
},
emphasis: {
areaColor: null,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,
borderWidth: 0,
shadowColor: "rgba(0, 0, 0, 0.5)"
}
}
}
},
colorList:[], // 每條柱子的顏色 傳顏色陣列 如["red","yellow","#F4E001"]
areaItems: { 豐縣: [116.59957, 34.69972] }, //需要填充的坐標 例如 網上有 可以自己去編輯
cityConfig: {
name: "徐州市",
dataJson: mapJson // 你自己下載的地域json
},
由于各公司業務不同，需要用到不同的地圖，以下是地圖修改的方式
方法一： 在網上下載相應地區的json 這里是下載地址
詳情見DEMO中echartDemo頁面
懶得看git的同學請繼續看，我盡量描述的詳細些
- 在這里下載地圖geoJson把后綴改成.json
- 在專案中引入
let mapJson = require("./json/xuzhou.json");
cityConfig: {
name: "徐州市",
dataJson: mapJson
},
- 當作引數傳進組件
<echarts-demo
:areaData="areaData"
:option="option"
:cityConfig="cityConfig"
:areaItems="areaItems"
></echarts-demo>
方法二：1.進入到 src\components\echarts\echartsSimple.vue 頁面
修改以下引入方式
2.修改option中 map相對應的名字
以上就是一個開箱即用的echarts簡單組件，之后會維護 自定義樣式，標題，等功能，如有需要請點贊留言，非常感謝，開源不易 求star 謝謝了
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/157647.html
標籤：其他