// 分类 const category = 'WordCloud' // 标题 const title = '词云图' // 类别, new Line() const chartType = 'WordCloud' // 用于标识,唯一,title的中文转拼音 const name = 'CiYunTu' // 右侧配置项 const setting = [ { label: '维度', // 设置组件类型, select / input / colorPicker type: 'select', // 字段 field: 'wordField', optionField: 'wordField', // 对应options中的字段 // 是否多选 multiple: false, // 绑定的值 value: '', // tab页。 data: 数据, custom: 自定义 tabName: 'data' }, { label: '指标', // 设置组件类型 type: 'select', // 字段 field: 'weightField', // 对应options中的字段 optionField: 'weightField', // 是否多选 multiple: false, value: '', tabName: 'data' }, /** 样式配置 **/ // 图表 graph { label: '颜色配置', // 设置组件类型 type: 'colorSelect', // 字段 field: 'color', // 对应options中的字段 optionField: 'color', value: ['#5B8FF9', '#61DDAA', '#5D7092', '#F6BD16', '#6F5EF9', '#6DC8EC', '#945FB9', '#FF9845', '#1E9493', '#FF99C3'], tabName: 'custom', groupName: 'graph' }, { label: '遮罩图片url', // 设置组件类型 type: 'input', // 字段 field: 'imageMask', // 对应options中的字段 optionField: 'imageMask', value: '', tabName: 'custom', groupName: 'graph' }, // 图例 legend // 边距 padding { label: '图表边距', type: 'padding', // 设置组件类型 field: 'appendPadding', // 字段 optionField: 'appendPadding', // 对应options中的字段 value: [20, 20, 20, 20], tabName: 'custom', groupName: 'padding' } ] // 模拟数据 const data = [ { x: 'China', value: 1383220000, category: 'asia' }, { x: 'India', value: 1316000000, category: 'asia' }, { x: 'United States', value: 324982000, category: 'america' }, { x: 'Indonesia', value: 263510000, category: 'asia' }, { x: 'Brazil', value: 207505000, category: 'america' }, { x: 'Pakistan', value: 196459000, category: 'asia' }, { x: 'Nigeria', value: 191836000, category: 'africa' }, { x: 'Bangladesh', value: 162459000, category: 'asia' }, { x: 'Russia', value: 146804372, category: 'europe' }, { x: 'Japan', value: 126790000, category: 'asia' }, { x: 'Mexico', value: 123518000, category: 'america' }, { x: 'Ethiopia', value: 104345000, category: 'africa' }, { x: 'Philippines', value: 104037000, category: 'asia' }, { x: 'Egypt', value: 93013300, category: 'africa' }, { x: 'Vietnam', value: 92700000, category: 'asia' }, { x: 'Germany', value: 82800000, category: 'europe' }, { x: 'Democratic Republic of the Congo', value: 82243000, category: 'africa' }, { x: 'Iran', value: 80135400, category: 'asia' }, { x: 'Turkey', value: 79814871, category: 'asia' }, { x: 'Thailand', value: 68298000, category: 'asia' }, { x: 'France', value: 67013000, category: 'europe' }, { x: 'United Kingdom', value: 65110000, category: 'europe' }, { x: 'Italy', value: 60599936, category: 'europe' }, { x: 'Tanzania', value: 56878000, category: 'africa' }, { x: 'South Africa', value: 55908000, category: 'africa' }, { x: 'Myanmar', value: 54836000, category: 'asia' }, { x: 'South Korea', value: 51446201, category: 'asia' }, { x: 'Colombia', value: 49224700, category: 'america' }, { x: 'Kenya', value: 48467000, category: 'africa' }, { x: 'Spain', value: 46812000, category: 'europe' }, { x: 'Argentina', value: 43850000, category: 'america' }, { x: 'Ukraine', value: 42541633, category: 'europe' }, { x: 'Sudan', value: 42176000, category: 'africa' }, { x: 'Uganda', value: 41653000, category: 'africa' }, { x: 'Algeria', value: 41064000, category: 'africa' }, { x: 'Poland', value: 38424000, category: 'europe' }, { x: 'Iraq', value: 37883543, category: 'asia' }, { x: 'Canada', value: 36541000, category: 'america' }, { x: 'Morocco', value: 34317500, category: 'africa' }, { x: 'Saudi Arabia', value: 33710021, category: 'asia' }, { x: 'Uzbekistan', value: 32121000, category: 'asia' }, { x: 'Malaysia', value: 32063200, category: 'asia' }, { x: 'Peru', value: 31826018, category: 'america' }, { x: 'Venezuela', value: 31431164, category: 'america' }, { x: 'Nepal', value: 28825709, category: 'asia' }, { x: 'Angola', value: 28359634, category: 'africa' }, { x: 'Ghana', value: 28308301, category: 'africa' }, { x: 'Yemen', value: 28120000, category: 'asia' }, { x: 'Afghanistan', value: 27657145, category: 'asia' }, { x: 'Mozambique', value: 27128530, category: 'africa' }, { x: 'Australia', value: 24460900, category: 'australia' }, { x: 'North Korea', value: 24213510, category: 'asia' }, { x: 'Cameroon', value: 23248044, category: 'africa' }, { x: 'Ivory Coast', value: 22671331, category: 'africa' }, { x: 'Madagascar', value: 22434363, category: 'africa' }, { x: 'Niger', value: 21564000, category: 'africa' }, { x: 'Sri Lanka', value: 21203000, category: 'asia' }, { x: 'Romania', value: 19760000, category: 'europe' }, { x: 'Burkina Faso', value: 19632147, category: 'africa' }, { x: 'Syria', value: 18907000, category: 'asia' }, { x: 'Mali', value: 18875000, category: 'africa' }, { x: 'Malawi', value: 18299000, category: 'africa' }, { x: 'Chile', value: 18191900, category: 'america' }, { x: 'Kazakhstan', value: 17975800, category: 'asia' }, { x: 'Netherlands', value: 17121900, category: 'europe' }, { x: 'Ecuador', value: 16737700, category: 'america' }, { x: 'Guatemala', value: 16176133, category: 'america' }, { x: 'Zambia', value: 15933883, category: 'africa' }, { x: 'Cambodia', value: 15626444, category: 'asia' }, { x: 'Senegal', value: 15256346, category: 'africa' }, { x: 'Chad', value: 14965000, category: 'africa' }, { x: 'Zimbabwe', value: 14542235, category: 'africa' }, { x: 'Guinea', value: 13291000, category: 'africa' }, { x: 'South Sudan', value: 12131000, category: 'africa' }, { x: 'Rwanda', value: 11553188, category: 'africa' }, { x: 'Belgium', value: 11356191, category: 'europe' }, { x: 'Tunisia', value: 11299400, category: 'africa' }, { x: 'Cuba', value: 11239004, category: 'america' }, { x: 'Bolivia', value: 11145770, category: 'america' }, { x: 'Somalia', value: 11079000, category: 'africa' }, { x: 'Haiti', value: 11078033, category: 'america' }, { x: 'Greece', value: 10783748, category: 'europe' }, { x: 'Benin', value: 10653654, category: 'africa' }, { x: 'Czech Republic', value: 10578820, category: 'europe' }, { x: 'Portugal', value: 10341330, category: 'europe' }, { x: 'Burundi', value: 10114505, category: 'africa' }, { x: 'Dominican Republic', value: 10075045, category: 'america' }, { x: 'Sweden', value: 10054100, category: 'europe' }, { x: 'United Arab Emirates', value: 10003223, category: 'asia' }, { x: 'Jordan', value: 9889270, category: 'asia' }, { x: 'Azerbaijan', value: 9823667, category: 'asia' }, { x: 'Hungary', value: 9799000, category: 'europe' }, { x: 'Belarus', value: 9498600, category: 'europe' }, { x: 'Honduras', value: 8866351, category: 'america' }, { x: 'Austria', value: 8773686, category: 'europe' }, { x: 'Tajikistan', value: 8742000, category: 'asia' }, { x: 'Israel', value: 8690220, category: 'asia' }, { x: 'Switzerland', value: 8417700, category: 'europe' }, { x: 'Papua New Guinea', value: 8151300, category: 'australia' } ] // 配置处理脚本 const optionHandler = 'let wordFieldValue = setting.find(settingItem=>settingItem.field === \'wordField\').value\n' + 'if (wordFieldValue) {\n' + ' option.colorField = wordFieldValue\n' + '}' // 数据处理脚本 const dataHandler = '' // 图表配置 new Line('domName', option) const option = { // 数据将要放入到哪个字段中 dataKey: 'data', data, appendPadding: [20, 20, 20, 20], // 设置图标的边距 wordField: 'x', weightField: 'value', colorField: 'category', color: ['#5B8FF9', '#61DDAA', '#5D7092', '#F6BD16', '#6F5EF9', '#6DC8EC', '#945FB9', '#FF9845', '#1E9493', '#FF99C3'], wordStyle: { fontFamily: 'Verdana', fontSize: [24, 80] }, imageMask: '', // 设置交互类型 interactions: [{ type: 'element-active' }], state: { active: { // 这里可以设置 active 时的样式 style: { lineWidth: 3 } } } } export default { category, title, chartType, name, option, setting, optionHandler, dataHandler }