JavaScript自定义图表

网易有数支持用户编写JavaScript代码自定义绘制图表。

此功能仅网易有数旗舰版和私有部署版支持。

功能入口：更多-echarts-JavaScript

JavaScript自定义图表 - 图1

功能介绍：

第一步：插入echarts图表控件，在代码编辑区编写JavaScript代码，生成自定义图表

与echarts官网在线编辑器类似，可直接在有数的代码编辑框中输入echarts配置项完成图表绘制，以基础的折线图为例，输入如下代码：

  1. option = {
  2.     xAxis: {
  3.         type: 'category',
  4.         data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  5.     },
  6.     yAxis: {
  7.         type: 'value'
  8.     },
  9.     series: [{
  10.         data: [820, 932, 901, 934, 1290, 1330, 1320],
  11.         type: 'line'
  12.     }]
  13. };

点击[应用]，代码运行无误，生成自定义图表：

JavaScript自定义图表 - 图2

代码中可以直接引用echarts变量，来调用echarts Api，也可对图表实例myChart变量来进行图表事件监听等操作。

以echarts的柱状图为例，输入如下代码：

  1. option = {
  2.     title : {
  3.         text: '某地区蒸发量和降水量',
  4.         subtext: '纯属虚构'
  5.     },
  6.     tooltip : {
  7.         trigger: 'axis'
  8.     },
  9.     legend: {
  10.         data:['蒸发量','降水量']
  11.     },
  12.     toolbox: {
  13.         show : true,
  14.         feature : {
  15.             dataView : {show: true, readOnly: false},
  16.             magicType : {show: true, type: ['line', 'bar']},
  17.             restore : {show: true},
  18.             saveAsImage : {show: true}
  19.         }
  20.     },
  21.     calculable : true,
  22.     xAxis : [
  23.         {
  24.             type : 'category',
  25.             data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
  26.         }
  27.     ],
  28.     yAxis : [
  29.         {
  30.             type : 'value'
  31.         }
  32.     ],
  33.     series : [
  34.         {
  35.             name:'蒸发量',
  36.             type:'bar',
  37.             data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
  38.             markPoint : {
  39.                 data : [
  40.                     {type : 'max', name: '最大值'},
  41.                     {type : 'min', name: '最小值'}
  42.                 ]
  43.             },
  44.             markLine : {
  45.                 data : [
  46.                     {type : 'average', name: '平均值'}
  47.                 ]
  48.             },
  49.         },
  52.         {
  53.             name:'降水量',
  54.             type:'bar',
  55.             data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
  56.             markPoint : {
  57.                 data : [
  58.                     {name : '年最高', value : 182.2, xAxis: 7, yAxis: 183},
  59.                     {name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}
  60.                 ]
  61.             },
  62.             markLine : {
  63.                 data : [
  64.                     {type : 'average', name : '平均值'}
  65.                 ]
  66.             },
  67.         }
  68.     ]
  70. };
  72. myChart.on('click', {seriesIndex: 1}, function() {
  73.     myChart.setOption({
  74.         series: [{}, {
  75.             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  76.                 offset: 0,
  77.                 color: 'rgb(55, 158, 168)'
  78.             }, {
  79.                 offset: 1,
  80.                 color: 'rgb(55, 70, 131)'
  81.             }])
  82.         }]
  83.     })
  84. });

点击[应用]，代码运行无误，生成自定义图表：

JavaScript自定义图表 - 图3

由于代码定义了图表标题，因此可将有数默认标题修改为不显示，拖拽调整整个图表的大小，即可得到一个好看的echarts图表：

JavaScript自定义图表 - 图4

第二步：拖入pill，引用pill生成的dataSet数据集

JavaScript自定义图表 - 图5

有数的dataSet的默认数据格式为二维数组，以上述pill为例，dataSet值应为：

[[“东北”, 1000], [“西北”, 2000],…]

可在代码编辑区输入：console.log(dataSet)，然后在浏览器控制台查看该数据集的完整数据。

用户可自由处理dataSet数据，并在配置项中引用：

  1. // 向右侧数据面板中拖入字段，可在代码中引用dataSet字段获取二维数组数据
  2. var data1 = dataSet.map(function(d) {return d[0];});
  3. var data2 = dataSet.map(function(d) {return d[1];});
  4. option = {
  5.     xAxis: {
  6.         type: 'category',
  7.         data: data1
  8.     },
  9.     yAxis: {
  10.         type: 'value'
  11.     },
  12.     series: [{
  13.         type: 'line',
  14.         data: data2
  15.     }]
  16. };

JavaScript自定义图表 - 图6

如无需对原始数据进行处理，可以直接在代码中用单独的数据集dataSet来声明数据，自由指定数据到视觉的映射：

dataset: { source: dataSet },

  1. // 向右侧数据面板中拖入字段，可在代码中引用dataSet字段获取二维数组数据
  2. option = {
  3.     dataset: {
  4.         source: dataSet
  5.     },
  6.     xAxis: {
  7.         type: 'category',
  8.     },
  9.     yAxis: {
  10.         type: 'value'
  11.     },
  12.     series: [{
  13.         type: 'line'
  14.     }]
  15. };

JavaScript自定义图表 - 图7

第三步：边框样式的调整

可拖拽改变图表大小，让其显示完全，也可在样式面板对标题及整个图表的背景、边框、圆角等作调整。

JavaScript自定义图表 - 图8

若代码运行有误，通过按 Command+Option+I (Mac) 或 Control+Shift+I（Windows、Linux），打开 Console 面板，查看错误详情。代码编辑器默认底部吸附，点击红框按钮，可切换至自由移动的编辑框。若echarts实例中使用了jQuery请求内部数据或加载内部资源导致代码报错时，需要自行处理数据请求以及跨域问题。

JavaScript自定义图表 - 图9

echarts图表控件的实际应用：3D地图

将经纬度数据、想要展示的度量值，和地理坐标对应的城市名称维度拖入数据面板，然后利用外部请求获取地理位置信息，加上刚刚引入的数据，通过echarts gl绘制如下3D地图：

JavaScript自定义图表 - 图10

具体代码如下：

  1. var barDataSet = dataSet.map(function (dataItem) {
  2.     return [dataItem[0], dataItem[1], Math.sqrt(dataItem[2])];
  3. });
  4. var maxValue = Math.max(...barDataSet.map(d => d[2]));
  5. fetch('https://ydcdn.nosdn.127.net/echarts/assets/map/json/china.json').then(e => e.json()).then(chinaJson => {
  6.     echarts.registerMap('china', chinaJson);
  7.     myChart.setOption({
  8.         backgroundColor: '#cdcfd5',
  9.         geo3D: {
  10.             map: 'china',
  11.             shading: 'lambert',
  12.             label: {
  13.                 show: true,
  14.                 textStyle: {
  15.                     color: '#000', //地图初始化区域字体颜色
  16.                     fontSize: 12,
  17.                     opacity: 1,
  18.                     backgroundColor: 'rgba(0,0,0,0)'
  19.                 },
  20.             },
  21.             light: {
  22.                 main: {
  23.                     intensity: 5,
  24.                     shadow: true,
  25.                     shadowQuality: 'high',
  26.                     alpha: 30
  27.                 },
  28.                 ambient: {
  29.                     intensity: 0.5
  30.                 },
  31.             },
  32.             viewControl: {
  33.                 distance: 80,
  34.                 center: [0, -10, 0],
  35.                 panMouseButton: 'left',
  36.                 rotateMouseButton: 'right'
  37.             },
  38.             groundPlane: {
  39.                 show: true,
  40.                 color: '#999'
  41.             },
  42.             postEffect: {
  43.                 enable: true,
  44.                 bloom: {
  45.                     enable: false
  46.                 },
  47.                 SSAO: {
  48.                     radius: 1,
  49.                     intensity: 1,
  50.                     enable: true
  51.                 },
  52.                 depthOfField: {
  53.                     enable: false,
  54.                     focalRange: 10,
  55.                     blurRadius: 10,
  56.                     fstop: 1
  57.                 }
  58.             },
  59.             temporalSuperSampling: {
  60.                 enable: true
  61.             },
  62.             itemStyle: {
  63.                 color: '#fff',
  64.                 borderWidth: 1,
  65.                 borderColor: '#ccc',
  66.             },
  68.             regionHeight: 2
  69.         },
  70.         visualMap: {
  71.             max: maxValue,
  72.             calculable: true,
  73.             realtime: false,
  74.             inRange: {
  75.                 color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
  76.             },
  77.             outOfRange: {
  78.                 colorAlpha: 0
  79.             }
  80.         },
  81.         series: [{
  82.             type: 'bar3D',
  83.             coordinateSystem: 'geo3D',
  84.             shading: 'lambert',
  85.             data: barDataSet,
  86.             barSize: 0.5,
  87.             minHeight: 0.2,
  88.             silent: false,
  89.             itemStyle: {
  90.                 color: 'orange'
  91.             },
  92.             emphasis: {
  93.                 label: {
  94.                     show: true,
  95.                     formatter: p => dataSet[p.dataIndex][3] + ': ' + p.data[2]
  96.                 }
  97.             }
  98.         }]
  99.     });
  101. })