taiwan-vue-components

v1.0.7

Published

3 years ago

taiwan svg chart vue components

Downloads

0High
0Medium
0Low

waiting7777

taiwan svg d3 vue

taiwan-vue-components

Taiwan SVG chart components 台灣行政區 SVG 圖表組件

Install

$ npm install taiwan-vue-components --save

Live Demo

Usage

Country 台灣縣市圖

Html

<html>
<head>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://unpkg.com/topojson-client@3"></script>
    <script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
    <script src="./dist/taiwan-vue-components.min.js"></script>
</head>
<body>
    <div id="app">
        <Country width="800" height="600" stroke="#000000" fill="#DCDCDC" fit="true"></Country>
        <Taipei width="800" height="600" stroke="#000000" fill="#DCDCDC" fit="false" lon="121.54" lat="25.09" scale="100000"></Taipei>
        <Ilan></Ilan>
        <Hsinchu></Hsinchu>
        <Hsinchu-City></Hsinchu-City>
        <Miaoli></Miaoli>
        <Changhua></Changhua>
        <Nantou></Nantou>
        <Yunlin></Yunlin>
        <Chiayi></Chiayi>
        <Chiayi-City></Chiayi-City>
        <Pingtung></Pingtung>
        <Taitung></Taitung>
        <Hualien></Hualien>
        <Penghu></Penghu>
        <Keelung></Keelung>
        <Kaohsiung></Kaohsiung>
        <New-Taipei></New-Taipei>
        <Taichung></Taichung>
        <Tainan></Tainan>
        <Taoyuan></Taoyuan>
        <Matsu></Matsu>
        <Kinmen></Kinmen>
    </div>
    <script>
        var app = new Vue({
            el: '#app'
        })
    </script>
</body>

Node.js

import {Country} from 'taiwan-vue-components'

<Country width="800" height="600" stroke="#000000" fill="#DCDCDC" fit="true"></Country>
<Taipei width="800" height="600" stroke="#000000" fill="#DCDCDC" fit="false" lon="121.54" lat="25.09" scale="100000"></Taipei>
<Ilan></Ilan>
<Hsinchu></Hsinchu>
<Hsinchu-City></Hsinchu-City>
<Miaoli></Miaoli>
<Changhua></Changhua>
<Nantou></Nantou>
<Yunlin></Yunlin>
<Chiayi></Chiayi>
<Chiayi-City></Chiayi-City>
<Pingtung></Pingtung>
<Taitung></Taitung>
<Hualien></Hualien>
<Penghu></Penghu>
<Keelung></Keelung>
<Kaohsiung></Kaohsiung>
<New-Taipei></New-Taipei>
<Taichung></Taichung>
<Tainan></Tainan>
<Taoyuan></Taoyuan>
<Matsu></Matsu>
<Kinmen></Kinmen>

fill 縣市區塊顏色預設 #FFFFFF
stroke 縣市線段顏色預設: #000000
width SVG 寬預設: 375
height SVG 高預設: 667
lon 投影經度預設: 120.751864
lat 投影緯度預設: 23.400998
scale 台灣投影大小預設: 7800
fit 自動調整圖形參數預設: false

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

taiwan-vue-components

Install

Live Demo

Usage

Country 台灣縣市圖

Html

Node.js

Any idea or problem is welcome!