# d3-example（版本：６．１．１）

前言：使用d3繪制的示例代碼，如折線圖、柱形圖派殷、面積圖淮逊、餅圖映琳、其他定制化圖表等。逐步更新中（大家有需要進行定制化的案例可以私信我，或者下方評論，我會根據(jù)自己的時間進行挑選并補充到項目中）

1昔驱、源碼地址

https://github.com/jkeMack/d3-example（我的github倉庫地址，有用的話留下個star呢）

2上忍、效果預覽

image.png

image.png

image.png

image.png

3骤肛、基礎(chǔ)用法

說明：
具體使用代碼可以參考commonDemo.html，有已有示例的代碼窍蓝。需要引用utils.js腋颠、common.css使用公共的方法和公共樣式。
utils.js中的源碼相對比較簡單吓笙，結(jié)構(gòu)也比較清晰淑玫，大家有需要定制化操作的可以很方便的進行修改。

1面睛、基礎(chǔ)折線圖使用代碼

// 折線圖的基礎(chǔ)配置
let lineOption = {
            xAxis:{
                show: true,
                type: 'category'
            },
            yAxis:{
                show: true,
                type: 'value'
            },
            height: 300,
            width: 500,
            margin:{
                top: 20,
                left: 40,
                right: 20,
                bottom: 20
            },
            data: [
                { name: '杭州', value: 30 },
                { name: '成都', value: 60 },
                { name: '天津', value: 70 },
                { name: '上海', value: 40 },
                { name: '北京', value: 88 },
                { name: '深圳', value: 100 }
            ]
        };

createBasicLine(lineOption);

2絮蒿、基礎(chǔ)柱形圖使用代碼

// 常規(guī)柱形圖，x軸是數(shù)據(jù)分類侮穿，y軸是數(shù)據(jù)具體值
let barOption = {
            xAxis:{
                show: true,
                type: 'category'
            },
            yAxis:{
                show: true,
                type: 'value'
            },
            height: 300,
            width: 500,
            margin:{
                top: 20,
                left: 40,
                right: 20,
                bottom: 20
            },
            data: [
                { name: '杭州', value: 30 },
                { name: '成都', value: 60 },
                { name: '天津', value: 70 },
                { name: '上海', value: 40 },
                { name: '北京', value: 88 },
                { name: '深圳', value: 100 }
            ]
        };

createBasicBar(barOption);

3歌径、橫向柱形圖使用代碼

// x軸顯示，配置type為value亲茅，y軸設(shè)置type為category分類。隱藏x軸的顯示，常規(guī)用于top10之類的圖表顯示
let barOption = {
            xAxis:{
                show: false,
                type: 'value'
            },
            yAxis:{
                show: true,
                type: 'category'
            },
            height: 300,
            width: 500,
            margin:{
                top: 20,
                left: 40,
                right: 20,
                bottom: 20
            },
            data: [
                { name: '杭州', value: 30 },
                { name: '成都', value: 60 },
                { name: '天津', value: 70 },
                { name: '上海', value: 40 },
                { name: '北京', value: 88 },
                { name: '深圳', value: 100 }
            ]
        };

createBasicBar(barOption);

4克锣、基礎(chǔ)餅圖使用示例

let pieOption = {
            height: 300,
            width: 400,
            outerRadius: 0.9,
            innerRadius:0.5,
            tooltipFormatter: (data)=>{
                return `${data.name}:${data.value}`;
            },
            legend:{
                show: true,
                position: 'left',
                width: 60
            },
            data: [
                { name: '杭州', value: 30 },
                { name: '成都', value: 60 },
                { name: '天津', value: 70 },
                { name: '上海', value: 40 },
                { name: '北京', value: 88 },
                { name: '深圳', value: 100 }
            ]
        };

createBasicPie(pieOption);