d3的基础图表封装示例

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

前言：使用d3绘制的示例代码，如折线图、柱形图、面积图、饼图、其他定制化图表等。逐步更新中（大家有需要进行定制化的案例可以私信我，或者下方评论，我会根据自己的时间进行挑选并补充到项目中）

1、源码地址

https://github.com/jkeMack/d3-example（我的github仓库地址，有用的话留下个star呢）

2、效果预览

image.png

image.png

image.png

image.png

3、基础用法

说明：
具体使用代码可以参考commonDemo.html，有已有示例的代码。需要引用utils.js、common.css使用公共的方法和公共样式。
utils.js中的源码相对比较简单，结构也比较清晰，大家有需要定制化操作的可以很方便的进行修改。

1、基础折线图使用代码

// 折线图的基础配置
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、基础柱形图使用代码

// 常规柱形图，x轴是数据分类，y轴是数据具体值
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轴设置type为category分类。隐藏x轴的显示，常规用于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、基础饼图使用示例

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);