zaibei_charts/test/bar/ChartBar10/index.js

import ChartBar from '../../../src/chart/bar/ChartBar10/ChartBar10.js';
import Title from "../../../src/chart/commonOptions/title";
import Grid from "../../../src/chart/commonOptions/grid";

let bar = new ChartBar(document.getElementsByClassName('c1')[0], {});
window.addEventListener('resize', () => {
    bar.resize();
});
// setTimeout(() => {
//     bar.setOption({
//         "color": ["#7eb2e7", "#66ffff"],
//         "title": {
//             "text": "",
//             "left": "5%",
//             "top": "5%",
//             "textStyle": {"fontSize": 14, "fontWeight": "normal", "color": "#000000"}
//         },
//         "grid": {"left": "18%", "right": "18%", "top": "20%", "bottom": "18%"},
//         "legend": {
//             "show": true,
//             "orient": "horizontal",
//             "left": "45%",
//             "top": "6%",
//             "itemWidth": 12,
//             "itemHeight": 12,
//             "itemAngelR": 10,
//             "textStyle": {"fontSize": 16, "fontWeight": "normal", "color": "#50a7bd"}
//         },
//         "xAxis": {
//             type:'category',
//             "axisLine": {"show": true, "lineStyle": {"color": "#00dff7", "width": 2}},
//             "axisLabel": {"show": true, "textStyle": {"fontSize": 12, "fontWeight": "normal", "color": "#50a7bd"}},
//             "highLightColor": "005eb8",
//             "data": [2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016]
//         },
//         "yAxis": {
//             type:'value',
//             "title": "(%)",
//             "nameTextStyle": {"fontSize": 14, "color": "#66ffff"},
//             "axisLine": {"show": true, "lineStyle": {"color": "#00dcff", "width": 2}},
//             "axisTick": {"show": true, "length": 3, "lineStyle": {"color": "#cee1ff", "width": 2}},
//             "splitLine": {"show": true, "lineStyle": {"color": "#26426a", "width": 1}},
//             "axisLabel": {
//                 "show": true,
//                 "format": false,
//                 "textStyle": {"fontSize": 12, "fontWeight": "normal", "color": "#66ffff"}
//             }
//         },
//         "tooltip": {
//             "show": true,
//             "padding": 10,
//             "itemGap": 5,
//             "offsetX": 15,
//             "offsetY": 0,
//             "titleColor": "#252525",
//             "bgStyle": {"borderColor": "#ccc", "borderWidth": 0, "backgroundColor": "rgba(0,0,0,0.8)"},
//             "shadowStyle": {"shadowColor": "#252525", "shadowOpacity": "35%"}
//         },
//         "series": [{"name": "行业1", "data": [210, 400, 600, 1100, 1500, 700, 500, 650, 1480]}, {
//             "name": "行业2",
//             "data": [610, 860, 600, 1300, 1300, 700, 580, 750, 1280],
//             "label": {"textStyle": {"fontSize": 12, "fontWeight": "normal", "color": ""}},
//             "barCategoryGap": "42%",
//             "barGap": "80%",
//             "colorList": ["#7eb2e7", "#66ffff"]
//         }],
//         "bg": {"backgroundColor": "rgba(0,0,0,0)"},
//         "noTheme": {},
//         "useDashboardTheme": false,
//         "column": {"xAxis": ["年份"], "series": ["行业1", "行业2"]},
//         "dataConfig": {
//             "column": {"xAxis": ["年份"], "series": ["行业1", "行业2"]},
//             "dataConfig": {
//                 "xAxis": {"年份": [2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016]},
//                 "series": {
//                     "行业1": [210, 400, 600, 1100, 1500, 700, 500, 650, 1480],
//                     "行业2": [610, 860, 600, 1300, 1300, 700, 580, 750, 1280]
//                 }
//             },
//             "configList": [{"name": "X轴名称", "type": "value", "comType": "single", "defaultKey": "年份"}, {
//                 "name": "Y轴名称",
//                 "type": "key",
//                 "comType": "multi",
//                 "defaultKey": ["行业1", "行业2"]
//             }],
//             "defaultData": {
//                 "行业1": [210, 400, 600, 1100, 1500, 700, 500, 650, 1480],
//                 "行业2": [610, 860, 600, 1300, 1300, 700, 580, 750, 1280],
//                 "年份": [2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016]
//             }
//         },
//         "customizeData": {
//             "title": {
//                 "name": "标题",
//                 "sub": {
//                     "text": {"name": "内容", "comType": "input", "defaultValue": ""},
//                     "left": {
//                         "name": "水平安放位置",
//                         "defaultChoose": 0,
//                         "chooseSub": [{
//                             "comType": "slider",
//                             "defaultValue": "5%",
//                             "comInfo": {"min": "0%", "max": "100%"}
//                         }, {
//                             "comType": "radio",
//                             "defaultValue": "left",
//                             "comInfo": [{"name": "居左", "value": "left"}, {
//                                 "name": "居中",
//                                 "value": "center"
//                             }, {"name": "居右", "value": "right"}]
//                         }]
//                     },
//                     "top": {
//                         "name": "垂直安放位置",
//                         "defaultChoose": 0,
//                         "chooseSub": [{
//                             "comType": "slider",
//                             "defaultValue": "5%",
//                             "comInfo": {"min": "0%", "max": "100%"}
//                         }, {
//                             "comType": "radio",
//                             "defaultValue": "top",
//                             "comInfo": [{"name": "居上", "value": "top"}, {
//                                 "name": "居中",
//                                 "value": "middle"
//                             }, {"name": "居下", "value": "bottom"}]
//                         }]
//                     },
//                     "textStyle": {
//                         "name": "字体样式",
//                         "sub": {
//                             "fontSize": {
//                                 "name": "字体大小",
//                                 "comType": "slider",
//                                 "defaultValue": 14,
//                                 "comInfo": {"min": 12, "max": 50}
//                             },
//                             "fontWeight": {
//                                 "name": "字体加粗",
//                                 "comType": "radio",
//                                 "defaultValue": "normal",
//                                 "comInfo": [{"name": "正常", "value": "normal"}, {"name": "加粗", "value": "bold"}]
//                             },
//                             "color": {"name": "字体颜色", "comType": "colorPicker", "defaultValue": "#000000"}
//                         }
//                     }
//                 }
//             },
//             "grid": {
//                 "name": "视区",
//                 "sub": {
//                     "left": {
//                         "name": "左边距",
//                         "comType": "slider",
//                         "defaultValue": "18%",
//                         "comInfo": {"min": "0%", "max": "100%"}
//                     },
//                     "right": {
//                         "name": "右边距",
//                         "comType": "slider",
//                         "defaultValue": "18%",
//                         "comInfo": {"min": "0%", "max": "100%"}
//                     },
//                     "top": {
//                         "name": "上边距",
//                         "comType": "slider",
//                         "defaultValue": "20%",
//                         "comInfo": {"min": "0%", "max": "100%"}
//                     },
//                     "bottom": {
//                         "name": "下边距",
//                         "comType": "slider",
//                         "defaultValue": "18%",
//                         "comInfo": {"min": "0%", "max": "100%"}
//                     }
//                 }
//             },
//             "legend": {
//                 "name": "图例",
//                 "sub": {
//                     "show": {
//                         "name": "是否显示图例",
//                         "comType": "radio",
//                         "defaultValue": true,
//                         "comInfo": [{"name": "是", "value": true}, {"name": "否", "value": false}]
//                     },
//                     "orient": {
//                         "name": "排列方式",
//                         "comType": "radio",
//                         "defaultValue": "horizontal",
//                         "comInfo": [{"name": "横向", "value": "horizontal"}, {"name": "纵向", "value": "vertical"}]
//                     },
//                     "left": {
//                         "name": "水平安放位置",
//                         "defaultChoose": 0,
//                         "chooseSub": [{
//                             "comType": "slider",
//                             "defaultValue": "45%",
//                             "comInfo": {"min": "0%", "max": "100%"}
//                         }, {
//                             "comType": "radio",
//                             "defaultValue": "right",
//                             "comInfo": [{"name": "居左", "value": "left"}, {
//                                 "name": "居中",
//                                 "value": "center"
//                             }, {"name": "居右", "value": "right"}]
//                         }]
//                     },
//                     "top": {
//                         "name": "垂直安放位置",
//                         "defaultChoose": 0,
//                         "chooseSub": [{
//                             "comType": "slider",
//                             "defaultValue": "6%",
//                             "comInfo": {"min": "0%", "max": "100%"}
//                         }, {
//                             "comType": "radio",
//                             "defaultValue": "top",
//                             "comInfo": [{"name": "居上", "value": "top"}, {
//                                 "name": "居中",
//                                 "value": "middle"
//                             }, {"name": "居下", "value": "bottom"}]
//                         }]
//                     },
//                     "itemWidth": {
//                         "name": "图例图形宽度",
//                         "comType": "slider",
//                         "defaultValue": 12,
//                         "comInfo": {"min": 10, "max": 100}
//                     },
//                     "itemHeight": {
//                         "name": "图例图形高度",
//                         "comType": "slider",
//                         "defaultValue": 12,
//                         "comInfo": {"min": 10, "max": 100}
//                     },
//                     "itemAngelR": {
//                         "name": "图形圆角半径",
//                         "defaultValue": 10,
//                         "comType": "slider",
//                         "comInfo": {"min": 0, "max": 20}
//                     },
//                     "textStyle": {
//                         "name": "字体样式",
//                         "sub": {
//                             "fontSize": {
//                                 "name": "字体大小",
//                                 "comType": "slider",
//                                 "defaultValue": 16,
//                                 "comInfo": {"min": 12, "max": 100}
//                             },
//                             "fontWeight": {
//                                 "name": "字体加粗",
//                                 "comType": "radio",
//                                 "defaultValue": "normal",
//                                 "comInfo": [{"name": "正常", "value": "normal"}, {"name": "加粗", "value": "bold"}]
//                             },
//                             "color": {"name": "字体颜色", "comType": "colorPicker", "defaultValue": "#50a7bd"}
//                         }
//                     }
//                 }
//             },
//             "xAxis": {
//                 "name": "x轴",
//                 "sub": {
//                     "axisLine": {
//                         "name": "轴线",
//                         "sub": {
//                             "show": {
//                                 "name": "是否显示",
//                                 "comType": "radio",
//                                 "defaultValue": true,
//                                 "comInfo": [{"name": "是", "value": true}, {"name": "否", "value": false}]
//                             },
//                             "lineStyle": {
//                                 "name": "线条样式",
//                                 "sub": {
//                                     "color": {"name": "颜色", "comType": "colorPicker", "defaultValue": "#00dff7"},
//                                     "width": {
//                                         "name": "线宽",
//                                         "comType": "slider",
//                                         "defaultValue": 2,
//                                         "comInfo": {"min": 1, "max": 20}
//                                     }
//                                 }
//                             }
//                         }
//                     },
//                     "axisLabel": {
//                         "name": "标签",
//                         "sub": {
//                             "show": {
//                                 "name": "是否显示",
//                                 "defaultValue": true,
//                                 "comType": "radio",
//                                 "comInfo": [{"name": "是", "value": true}, {"name": "否", "value": false}]
//                             },
//                             "textStyle": {
//                                 "name": "字体样式",
//                                 "type": "ChartBarH",
//                                 "sub": {
//                                     "fontSize": {
//                                         "name": "字体大小",
//                                         "comType": "slider",
//                                         "defaultValue": 12,
//                                         "comInfo": {"min": 12, "max": 50}
//                                     },
//                                     "fontWeight": {
//                                         "name": "字体加粗",
//                                         "comType": "radio",
//                                         "defaultValue": "normal",
//                                         "comInfo": [{"name": "正常", "value": "normal"}, {"name": "加粗", "value": "bold"}]
//                                     },
//                                     "color": {"name": "字体颜色", "comType": "colorPicker", "defaultValue": "#50a7bd"}
//                                 }
//                             }
//                         }
//                     },
//                     "highLightColor": {"name": "高亮框颜色", "defaultValue": "005eb8", "comType": "colorPicker"}
//                 }
//             },
//             "yAxis": {
//                 "name": "y轴",
//                 "sub": {
//                     "title": {"name": "坐标轴名称", "defaultValue": "(%)", "comType": "input"},
//                     "nameTextStyle": {
//                         "name": "坐标轴名称样式",
//                         "sub": {
//                             "fontSize": {
//                                 "name": "字体大小",
//                                 "defaultValue": 14,
//                                 "comType": "slider",
//                                 "comInfo": {"min": 12, "max": 50}
//                             }, "color": {"name": "字体颜色", "defaultValue": "#66ffff", "comType": "colorPicker"}
//                         }
//                     },
//                     "axisLine": {
//                         "name": "轴线",
//                         "sub": {
//                             "show": {
//                                 "name": "是否显示",
//                                 "comType": "radio",
//                                 "defaultValue": true,
//                                 "comInfo": [{"name": "是", "value": true}, {"name": "否", "value": false}]
//                             },
//                             "lineStyle": {
//                                 "name": "线条样式",
//                                 "sub": {
//                                     "color": {"name": "颜色", "comType": "colorPicker", "defaultValue": "#00dcff"},
//                                     "width": {
//                                         "name": "线宽",
//                                         "comType": "slider",
//                                         "defaultValue": 2,
//                                         "comInfo": {"min": 1, "max": 20}
//                                     }
//                                 }
//                             }
//                         }
//                     },
//                     "axisTick": {
//                         "name": "轴刻度线",
//                         "sub": {
//                             "show": {
//                                 "name": "是否显示",
//                                 "comType": "radio",
//                                 "defaultValue": true,
//                                 "comInfo": [{"name": "是", "value": true}, {"name": "否", "value": false}]
//                             },
//                             "length": {
//                                 "name": "线条长度",
//                                 "comType": "slider",
//                                 "defaultValue": 3,
//                                 "comInfo": {"min": 1, "max": 50}
//                             },
//                             "lineStyle": {
//                                 "name": "线条样式",
//                                 "sub": {
//                                     "color": {"name": "颜色", "comType": "colorPicker", "defaultValue": "#cee1ff"},
//                                     "width": {
//                                         "name": "线宽",
//                                         "comType": "slider",
//                                         "defaultValue": 2,
//                                         "comInfo": {"min": 1, "max": 20}
//                                     }
//                                 }
//                             }
//                         }
//                     },
//                     "splitLine": {
//                         "name": "分割线",
//                         "sub": {
//                             "show": {
//                                 "name": "是否显示",
//                                 "comType": "radio",
//                                 "defaultValue": true,
//                                 "comInfo": [{"name": "是", "value": true}, {"name": "否", "value": false}]
//                             },
//                             "lineStyle": {
//                                 "name": "线条样式",
//                                 "sub": {
//                                     "color": {"name": "颜色", "comType": "colorPicker", "defaultValue": "#26426a"},
//                                     "width": {
//                                         "name": "线宽",
//                                         "comType": "slider",
//                                         "defaultValue": 1,
//                                         "comInfo": {"min": 1, "max": 20}
//                                     }
//                                 }
//                             }
//                         }
//                     },
//                     "axisLabel": {
//                         "name": "标签",
//                         "sub": {
//                             "show": {
//                                 "name": "是否显示",
//                                 "defaultValue": true,
//                                 "comType": "radio",
//                                 "comInfo": [{"name": "是", "value": true}, {"name": "否", "value": false}]
//                             },
//                             "format": {
//                                 "name": "是否显示千分位符",
//                                 "defaultValue": false,
//                                 "comType": "radio",
//                                 "comInfo": [{"name": "是", "value": true}, {"name": "否", "value": false}]
//                             },
//                             "textStyle": {
//                                 "name": "字体样式",
//                                 "type": "ChartBarH",
//                                 "sub": {
//                                     "fontSize": {
//                                         "name": "字体大小",
//                                         "comType": "slider",
//                                         "defaultValue": 12,
//                                         "comInfo": {"min": 12, "max": 50}
//                                     },
//                                     "fontWeight": {
//                                         "name": "字体加粗",
//                                         "comType": "radio",
//                                         "defaultValue": "normal",
//                                         "comInfo": [{"name": "正常", "value": "normal"}, {"name": "加粗", "value": "bold"}]
//                                     },
//                                     "color": {"name": "字体颜色", "comType": "colorPicker", "defaultValue": "#66ffff"}
//                                 }
//                             }
//                         }
//                     }
//                 }
//             },
//             "tooltip": {
//                 "name": "提示",
//                 "sub": {
//                     "show": {
//                         "name": "是否显示提示框",
//                         "defaultValue": true,
//                         "comType": "radio",
//                         "comInfo": [{"name": "是", "value": true}, {"name": "否", "value": false}]
//                     },
//                     "padding": {
//                         "name": "内边距",
//                         "defaultValue": 10,
//                         "comType": "slider",
//                         "comInfo": {"min": 1, "max": 100}
//                     },
//                     "itemGap": {
//                         "name": "行间距",
//                         "defaultValue": 5,
//                         "comType": "slider",
//                         "comInfo": {"min": 1, "max": 50}
//                     },
//                     "offsetX": {
//                         "name": "横向偏移值",
//                         "defaultValue": 15,
//                         "comType": "slider",
//                         "comInfo": {"min": -100, "max": 100}
//                     },
//                     "offsetY": {
//                         "name": "纵向偏移值",
//                         "defaultValue": 0,
//                         "comType": "slider",
//                         "comInfo": {"min": -100, "max": 100}
//                     },
//                     "titleColor": {"name": "提示框标题颜色", "defaultValue": "#252525", "comType": "colorPicker"},
//                     "bgStyle": {
//                         "name": "背景",
//                         "sub": {
//                             "borderColor": {"name": "边框颜色", "defaultValue": "#ccc", "comType": "colorPicker"},
//                             "borderWidth": {
//                                 "name": "边框宽度",
//                                 "defaultValue": 0,
//                                 "comType": "slider",
//                                 "comInfo": {"min": 0, "max": 20}
//                             },
//                             "backgroundColor": {
//                                 "name": "背景颜色",
//                                 "defaultValue": "rgba(0,0,0,0.8)",
//                                 "comType": "colorPicker"
//                             }
//                         }
//                     },
//                     "shadowStyle": {
//                         "name": "阴影",
//                         "sub": {
//                             "shadowColor": {"name": "阴影颜色", "defaultValue": "#252525", "comType": "colorPicker"},
//                             "shadowOpacity": {
//                                 "name": "阴影透明度",
//                                 "defaultValue": "35%",
//                                 "comType": "slider",
//                                 "comInfo": {"min": "0%", "max": "100%"}
//                             }
//                         }
//                     }
//                 }
//             },
//             "series": {
//                 "name": "系列",
//                 "type": "ChartClustBarH",
//                 "sub": {
//                     "label": {
//                         "name": "图形的文本标签",
//                         "sub": {
//                             "textStyle": {
//                                 "name": "字体样式",
//                                 "sub": {
//                                     "fontSize": {
//                                         "name": "字体大小",
//                                         "comType": "slider",
//                                         "defaultValue": 12,
//                                         "comInfo": {"min": 12, "max": 50}
//                                     },
//                                     "fontWeight": {
//                                         "name": "字体加粗",
//                                         "comType": "radio",
//                                         "defaultValue": "normal",
//                                         "comInfo": [{"name": "正常", "value": "normal"}, {"name": "加粗", "value": "bold"}]
//                                     },
//                                     "color": {"name": "字体颜色", "comType": "colorPicker", "defaultValue": ""}
//                                 }
//                             }
//                         }
//                     },
//                     "barCategoryGap": {
//                         "name": "类目间柱间距",
//                         "comType": "slider",
//                         "defaultValue": "42%",
//                         "comInfo": {"min": "0%", "max": "90%"}
//                     },
//                     "barGap": {
//                         "name": "类目内柱间距",
//                         "comType": "slider",
//                         "defaultValue": "80%",
//                         "comInfo": {"min": "0%", "max": "300%"}
//                     },
//                     "colorList": {"name": "系列色", "comType": "colorPickerList", "defaultValue": ["#7eb2e7", "#66ffff"]}
//                 }
//             },
//             "bg": {
//                 "name": "背景",
//                 "sub": {"backgroundColor": {"name": "背景色", "defaultValue": "rgba(0,0,0,0)", "comType": "colorPicker"}}
//             },
//             "noTheme": true
//         },
//         "chartName": "ChartBar10",
//         "chartCuid": "CHART-ff80808167bb9b4a0167c5cf7fac0033",
//         "dataOption": [{"data": [2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016], "name": "年份"}, {
//             "name": "",
//             "data": [{"name": "行业1", "data": [210, 400, 600, 1100, 1500, 700, 500, 650, 1480]}, {
//                 "name": "行业2",
//                 "data": [610, 860, 600, 1300, 1300, 700, 580, 750, 1280]
//             }]
//         }],
//         "dataError": false
//     })
// }, 3000);