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