vue引入echarts 展示散点图
uni-app 2021-11-03 11:06:09

APP，H5，三端通用

 

组件封装版：

组件封装.png

视图

XML/HTML Code复制内容到剪贴板
  1. <template>  
  2.     <view>  
  3.         <view class="n-position-relative" style="width: 100%; height: 800rpx;">  
  4.             <charts1 ref="charts1" :list="charts1.list" :count="charts1.count" :colors="charts1.colors" :labels="charts1.labels"  @click="handleClick"></charts1>  
  5.         </view>  
  6.     </view>  
  7. </template>  
  8.   
  9. <script>  
  10.     import charts1 from '@/components/l-echart/charts/ecStatClustering.vue'  
  11.       
  12.     export default {  
  13.         components: {  
  14.             charts1  
  15.         },  
  16.         data() {  
  17.             return {  
  18.                 charts1:{  
  19.                     count:4, // 分成四个指标  
  20.                     colors:[  
  21.                         '#37A2DA',  
  22.                         '#37a354',  
  23.                         '#e06343',  
  24.                         '#b5bd48',   
  25.                     ],  
  26.                     labels:[  
  27.                         '正面-高关注',  
  28.                         '正面-低关注',  
  29.                         '负面-高关注',  
  30.                         '负面-低关注',  
  31.                     ],  
  32.                     list:[  
  33.                         [3.275154, 2.957587],  
  34.                         [-3.344465, 2.603513],  
  35.                         [0.355083, 3.376585],  
  36.                         [1.852435, 3.547351],  
  37.                         [-2.078973, 2.552013],  
  38.                         [-0.993756, 0.884433],  
  39.                         [2.682252, 4.007573],  
  40.                         [-3.087776, 2.878713],  
  41.                         [-1.565978, 1.256985],  
  42.                         [2.441611, 0.444826],  
  43.                         [-0.659487, 3.111284],  
  44.                         [-0.459601, 2.618005],  
  45.                         [2.17768, 2.387793],  
  46.                         [-2.920969, 2.917485],  
  47.                         [-0.028814, 4.168078],  
  48.                         [3.625746, 2.119041],  
  49.                         [-3.912363, 1.325108],  
  50.                         [-0.551694, 2.814223],  
  51.                         [2.855808, 3.483301],  
  52.                         [-3.594448, 2.856651],  
  53.                         [0.421993, 2.372646],  
  54.                         [1.650821, 3.407572],  
  55.                         [-2.082902, 3.384412],  
  56.                         [-0.718809, 2.492514],  
  57.                         [4.513623, 3.841029],  
  58.                         [-4.822011, 4.607049],  
  59.                         [-0.656297, 1.449872],  
  60.                         [1.919901, 4.439368],  
  61.                         [-3.287749, 3.918836],  
  62.                         [-1.576936, 2.977622],  
  63.                         [3.598143, 1.97597],  
  64.                         [-3.977329, 4.900932],  
  65.                         [-1.79108, 2.184517],  
  66.                         [3.914654, 3.559303],  
  67.                         [-1.910108, 4.166946],  
  68.                         [-1.226597, 3.317889],  
  69.                         [1.148946, 3.345138],  
  70.                         [-2.113864, 3.548172],  
  71.                         [0.845762, 3.589788],  
  72.                         [2.629062, 3.535831],  
  73.                     ]  
  74.                 }  
  75.             }  
  76.         },  
  77.         onLoad() {  
  78.             this.init()  
  79.         },  
  80.         methods: {  
  81.             init() {  
  82.                 setTimeout(() => {  
  83.                     this.$refs.charts1.init()  
  84.                 }, 100);  
  85.             },  
  86.             handleClick(params) {  
  87.                 uni.navigateTo({  
  88.                     url: '/pages/list/hte2',  
  89.                     success: res => {},  
  90.                     fail: () => {},  
  91.                     complete: () => {}  
  92.                 });  
  93.             }  
  94.         }  
  95.     }  
  96. </script>  
  97.   
  98. <style>  
  99. </style>  

 

 

组件内容：

XML/HTML Code复制内容到剪贴板
  1. <template>  
  2.     <view class="charts-box">  
  3.         <l-echart ref="chart"></l-echart>  
  4.     </view>  
  5. </template>  
  6.   
  7. <script>  
  8.     import lecharts from '@/components/l-echart/l-echart.vue'  
  9.     import * as echarts from '@/components/l-echart/echarts.js';  
  10.     import ecStat from 'echarts-stat';  
  11.       
  12.     export default {  
  13.         name:"ecStatClustering",  
  14.         components: {  
  15.             lecharts  
  16.         },  
  17.         props:{  
  18.             list:{  
  19.                 type:Array,  
  20.                 default:[]  
  21.             },  
  22.             count:{  
  23.                 type:Number,  
  24.                 default:4  
  25.             },  
  26.             colors:{  
  27.                 type:Array,  
  28.                 default:[]  
  29.             },  
  30.             labels:{  
  31.                 type:Array,  
  32.                 default:[]  
  33.             }  
  34.         },  
  35.         data() {  
  36.             return {  
  37.                   
  38.             };  
  39.         },  
  40.         methods:{  
  41.             init(){  
  42.                 this.initChart()  
  43.             },  
  44.             initChart(){  
  45.                 // y轴没负数  
  46.                 let data = this.list;  
  47.                 var CLUSTER_COUNT = this.count;  
  48.                 var DIENSIION_CLUSTER_INDEX = 2;  
  49.                 var COLOR_ALL = this.colors;  
  50.                 var COLOR_TXT = this.labels  
  51.                 var pieces = [];  
  52.                 for (var i = 0; i < CLUSTER_COUNT; i++) {  
  53.                     pieces.push({  
  54.                         "value": i,  
  55.                         "label": COLOR_TXT[i],  
  56.                         "color": COLOR_ALL[i],  
  57.                         "symbol": 'circle',  
  58.                         "symbolSize": 10  
  59.                     });  
  60.                 }  
  61.                   
  62.                 // visualMap参数参照https://blog.csdn.net/qq_42363090/article/details/105245615  
  63.                 // markLine基线参数参照https://blog.csdn.net/qq_42177730/article/details/81223666  
  64.                 let chartOptions = {  
  65.                     dataset: [{  
  66.                             source: data  
  67.                         },  
  68.                         {  
  69.                             transform: {  
  70.                                 type: 'ecStat:clustering',  
  71.                                 // print: true,  
  72.                                 config: {  
  73.                                     clusterCount: CLUSTER_COUNT,  
  74.                                     outputType: 'single',  
  75.                                     outputClusterIndexDimension: DIENSIION_CLUSTER_INDEX  
  76.                                 }  
  77.                             }  
  78.                         }  
  79.                     ],  
  80.                     tooltip: {  
  81.                         position: 'top'  
  82.                     },  
  83.                     visualMap: {  
  84.                         type: 'piecewise',  
  85.                         top: 'bottom',  
  86.                         orient:"horizontal",// 放置 visualMap 组件，水平（'horizontal'）或者竖直（'vertical'）。  
  87.                         min: 0,  
  88.                         max: CLUSTER_COUNT,  
  89.                         left: 'center', // 组件离容器左侧的距离,'left', 'center', 'right','20%'  
  90.                         splitNumber: CLUSTER_COUNT,  
  91.                         dimension: DIENSIION_CLUSTER_INDEX,  
  92.                         pieces: pieces,  
  93.                         // itemWidth:10,  
  94.                         // itemGap:5,  
  95.                         // padding:[20, 1] ,// 内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距  
  96.                         textStyle:{  
  97.                             fontSize:10   
  98.                         }  
  99.                     },  
  100.                     grid: {  
  101.                         left: 20 ,// grid 组件离容器左侧的距离。可以是像 '20%' 也可以是 'left', 'center', 'right'。  
  102.                         right: 40  
  103.                     },  
  104.                     xAxis: {},  
  105.                     yAxis: {  
  106.                         offset:-140  
  107.                     },  
  108.                     series: {  
  109.                         type: 'scatter',  
  110.                         encode: {  
  111.                             tooltip: [0, 1]  
  112.                         },  
  113.                         symbolSize: 15,  
  114.                         itemStyle: {  
  115.                             borderColor: '#555'  
  116.                         },  
  117.                         datasetIndex: 1,  
  118.                         markLine: {  
  119.                             silent: true, // 图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件  
  120.                             // symbol:'none',// 去掉基线箭头  
  121.                             lineStyle: {  
  122.                               normal: {  
  123.                                 color: '#e06343'                   // 这儿设置安全基线颜色  
  124.                               },  
  125.                             },  
  126.                             data: [  
  127.                                 {  
  128.                                   yAxis: 2.5  
  129.                                 }  
  130.                             ],  
  131.                             label: {  
  132.                               normal: {  
  133.                                 formatter: '标准\n基线', // 这儿设置安全基线  
  134.                                 color: '#e06343'  
  135.                               }  
  136.                             },  
  137.                         }  
  138.                     }  
  139.                 };  
  140.                   
  141.                 const _this = this  
  142.                 // console.log(chartOptions)  
  143.                 echarts.registerTransform(ecStat.transform.clustering);  
  144.                 this.$refs.chart.init(config => {  
  145.                     const {  
  146.                         canvas  
  147.                     } = config;  
  148.                     const chart = echarts.init(canvas, null, config);  
  149.                     canvas.setChart(chart);  
  150.                     chart.setOption(chartOptions);  
  151.                     chart.on('click',(params) => {  
  152.                         this.$emit("click",params)  
  153.                     });  
  154.                     // 需要把 chart 返回  
  155.                     return chart;  
  156.                 });  
  157.             }  
  158.         }  
  159.     }  
  160. </script>  
  161.   
  162. <style scoped>  
  163. .charts-box{  
  164.     width: 100%;  
  165.     height: 100%;  
  166. }  
  167. </style>  

 

 

 

 

散点图.png 

 

1、引入组件，放在components目录下

l-echart.zip
文件类型: .zip 67243ff83eef9b12ac0b55c4839cf090.zip (317.07 KB)

 

2、引入stat

XML/HTML Code复制内容到剪贴板
  1. npm install echarts-stat -S  

 

3、vue页面：

XML/HTML Code复制内容到剪贴板
  1. <template>  
  2.     <view>  
  3.         <view class="n-position-relative" style="width: 100%; height: 800rpx;">  
  4.             <l-echart ref="chart"></l-echart>  
  5.         </view>  
  6.     </view>  
  7. </template>  
  8.   
  9. <script>  
  10.     import lecharts from '@/components/l-echart/l-echart.vue'  
  11.     import * as echarts from '@/components/l-echart/echarts.js';  
  12.     import ecStat from 'echarts-stat';  
  13.       
  14.     export default {  
  15.         components: {  
  16.             lecharts  
  17.         },  
  18.         data() {  
  19.             return {  
  20.                   
  21.             }  
  22.         },  
  23.         onLoad() {  
  24.             this.init()  
  25.         },  
  26.         methods: {  
  27.             init() {  
  28.                 setTimeout(e => {  
  29.                     this.initChart()  
  30.                 }, 200);  
  31.             },  
  32.             initChart() {  
  33.                 let data = [  
  34.                     [3.275154, 2.957587],  
  35.                     [-3.344465, 2.603513],  
  36.                     [0.355083, -3.376585],  
  37.                     [1.852435, 3.547351],  
  38.                     [-2.078973, 2.552013],  
  39.                     [-0.993756, -0.884433],  
  40.                     [2.682252, 4.007573],  
  41.                     [-3.087776, 2.878713],  
  42.                     [-1.565978, -1.256985],  
  43.                     [2.441611, 0.444826],  
  44.                     [-0.659487, 3.111284],  
  45.                     [-0.459601, -2.618005],  
  46.                     [2.17768, 2.387793],  
  47.                     [-2.920969, 2.917485],  
  48.                     [-0.028814, -4.168078],  
  49.                     [3.625746, 2.119041],  
  50.                     [-3.912363, 1.325108],  
  51.                     [-0.551694, -2.814223],  
  52.                     [2.855808, 3.483301],  
  53.                     [-3.594448, 2.856651],  
  54.                     [0.421993, -2.372646],  
  55.                     [1.650821, 3.407572],  
  56.                     [-2.082902, 3.384412],  
  57.                     [-0.718809, -2.492514],  
  58.                     [4.513623, 3.841029],  
  59.                     [-4.822011, 4.607049],  
  60.                     [-0.656297, -1.449872],  
  61.                     [1.919901, 4.439368],  
  62.                     [-3.287749, 3.918836],  
  63.                     [-1.576936, -2.977622],  
  64.                     [3.598143, 1.97597],  
  65.                     [-3.977329, 4.900932],  
  66.                     [-1.79108, -2.184517],  
  67.                     [3.914654, 3.559303],  
  68.                     [-1.910108, 4.166946],  
  69.                     [-1.226597, -3.317889],  
  70.                     [1.148946, 3.345138],  
  71.                     [-2.113864, 3.548172],  
  72.                     [0.845762, -3.589788],  
  73.                     [2.629062, 3.535831],  
  74.                     [-1.640717, 2.990517],  
  75.                     [-1.881012, -2.485405],  
  76.                     [4.606999, 3.510312],  
  77.                     [-4.366462, 4.023316],  
  78.                     [0.765015, -3.00127],  
  79.                     [3.121904, 2.173988],  
  80.                     [-4.025139, 4.65231],  
  81.                     [-0.559558, -3.840539],  
  82.                     [4.376754, 4.863579],  
  83.                     [-1.874308, 4.032237],  
  84.                     [-0.089337, -3.026809],  
  85.                     [3.997787, 2.518662],  
  86.                     [-3.082978, 2.884822],  
  87.                     [0.845235, -3.454465],  
  88.                     [1.327224, 3.358778],  
  89.                     [-2.889949, 3.596178],  
  90.                     [-0.966018, -2.839827],  
  91.                     [2.960769, 3.079555],  
  92.                     [-3.275518, 1.577068],  
  93.                     [0.639276, -3.41284]  
  94.                 ];  
  95.                 var CLUSTER_COUNT = 3;  
  96.                 var DIENSIION_CLUSTER_INDEX = 2;  
  97.                 var COLOR_ALL = [  
  98.                     '#37A2DA',  
  99.                     '#e06343',  
  100.                     '#37a354',  
  101.                     // '#b55dba',  
  102.                     // '#b5bd48',  
  103.                     // '#8378EA',  
  104.                     // '#96BFFF'  
  105.                 ];  
  106.                 // var COLOR_TXT = [  
  107.                 //  '热度',  
  108.                 //  '正面',  
  109.                 //  '负面'  
  110.                 // ]  
  111.                 var pieces = [];  
  112.                 for (var i = 0; i < CLUSTER_COUNT; i++) {  
  113.                     pieces.push({  
  114.                         "value": i,  
  115.                         "label": 'cluster ' + i,  
  116.                         "color": COLOR_ALL[i]  
  117.                     });  
  118.                 }  
  119.                   
  120.                 // visualMap参数参照https://blog.csdn.net/qq_42363090/article/details/105245615  
  121.                 let chartOptions = {  
  122.                     dataset: [{  
  123.                             source: data  
  124.                         },  
  125.                         {  
  126.                             transform: {  
  127.                                 type: 'ecStat:clustering',  
  128.                                 // print: true,  
  129.                                 config: {  
  130.                                     clusterCount: CLUSTER_COUNT,  
  131.                                     outputType: 'single',  
  132.                                     outputClusterIndexDimension: DIENSIION_CLUSTER_INDEX  
  133.                                 }  
  134.                             }  
  135.                         }  
  136.                     ],  
  137.                     tooltip: {  
  138.                         position: 'top'  
  139.                     },  
  140.                     visualMap: {  
  141.                         type: 'piecewise',  
  142.                         top: 'bottom',  
  143.                         orient:"horizontal",// 放置 visualMap 组件，水平（'horizontal'）或者竖直（'vertical'）。  
  144.                         min: 0,  
  145.                         max: CLUSTER_COUNT,  
  146.                         left: 'center', // 组件离容器左侧的距离,'left', 'center', 'right','20%'  
  147.                         splitNumber: CLUSTER_COUNT,  
  148.                         dimension: DIENSIION_CLUSTER_INDEX,  
  149.                         pieces: pieces,  
  150.                     },  
  151.                     grid: {  
  152.                         left: 30 ,// grid 组件离容器左侧的距离。可以是像 '20%' 也可以是 'left', 'center', 'right'。  
  153.                         right: 20  
  154.                     },  
  155.                     xAxis: {},  
  156.                     yAxis: {},  
  157.                     series: {  
  158.                         type: 'scatter',  
  159.                         encode: {  
  160.                             tooltip: [0, 1]  
  161.                         },  
  162.                         symbolSize: 15,  
  163.                         itemStyle: {  
  164.                             borderColor: '#555'  
  165.                         },  
  166.                         datasetIndex: 1  
  167.                     }  
  168.                 };  
  169.                   
  170.                 const _this = this  
  171.                 // console.log(chartOptions)  
  172.                 echarts.registerTransform(ecStat.transform.clustering);  
  173.                 this.$refs.chart.init(config => {  
  174.                     const {  
  175.                         canvas  
  176.                     } = config;  
  177.                     const chart = echarts.init(canvas, null, config);  
  178.                     // console.log(chart,chartOptions)  
  179.                       
  180.                     canvas.setChart(chart);  
  181.                     chart.setOption(chartOptions);  
  182.                       
  183.                     // .params.name  
  184.                     chart.on('click',function(params){  
  185.                         console.log(params)  
  186.                           
  187.                         uni.navigateTo({  
  188.                             url: '/pages/list/hte2',  
  189.                             success: res => {},  
  190.                             fail: () => {},  
  191.                             complete: () => {}  
  192.                         });  
  193.                         // const currentChartsData = bubbleOptions.series[0].data[params.dataIndex]  
  194.                         // const currentTag = _this.tags[params.dataIndex]  
  195.                         // const index = graceJS.arrayIndexOf(_this.checktags, currentTag.id)  
  196.                         // // console.log(graceJS.arrayIndexOf(_this.tags, currentTag.id))  
  197.                         // if(index == -1){  
  198.                         //  // 不存在，加一组数组  
  199.                         //  _this.checktags.push(currentTag.id);  
  200.                         //  currentChartsData.itemStyle.normal.color = "#cdb659"  
  201.                         // }else{  
  202.                         //  // 已经存在  
  203.                         //  graceJS.arrayDrop(_this.checktags, index);  
  204.                         //  currentChartsData.itemStyle.normal.color = "#7b7a7a"  
  205.                         // }  
  206.                         // chart.setOption(bubbleOptions);  
  207.                     });  
  208.                     // 需要把 chart 返回  
  209.                     return chart;  
  210.                 });  
  211.   
  212.             }  
  213.         }  
  214.     }  
  215. </script>  
  216.   
  217. <style>  
  218. </style>  

 

 

自定义标记类型

ECharts 提供的标记类型包括

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

可以通过 'image://url' 设置为图片，其中 URL 为图片的链接，或者 dataURI。

自定义标记类型.png

 

XML/HTML Code复制内容到剪贴板
  1. <template>  
  2.     <view>  
  3.         <view class="n-position-relative" style="width: 100%; height: 800rpx;">  
  4.             <l-echart ref="chart"></l-echart>  
  5.         </view>  
  6.     </view>  
  7. </template>  
  8.   
  9. <script>  
  10.     import lecharts from '@/components/l-echart/l-echart.vue'  
  11.     import * as echarts from '@/components/l-echart/echarts.js';  
  12.     import ecStat from 'echarts-stat';  
  13.       
  14.     export default {  
  15.         components: {  
  16.             lecharts  
  17.         },  
  18.         data() {  
  19.             return {  
  20.                   
  21.             }  
  22.         },  
  23.         onLoad() {  
  24.             this.init()  
  25.         },  
  26.         methods: {  
  27.             init() {  
  28.                 setTimeout(e => {  
  29.                     this.initChart()  
  30.                 }, 200);  
  31.             },  
  32.             initChart() {  
  33.                 // y轴没负数  
  34.                 let data = [  
  35.                     [3.275154, 2.957587],  
  36.                     [-3.344465, 2.603513],  
  37.                     [0.355083, 3.376585],  
  38.                     [1.852435, 3.547351],  
  39.                     [-2.078973, 2.552013],  
  40.                     [-0.993756, 0.884433],  
  41.                     [2.682252, 4.007573],  
  42.                     [-3.087776, 2.878713],  
  43.                     [-1.565978, 1.256985],  
  44.                     [2.441611, 0.444826],  
  45.                     [-0.659487, 3.111284],  
  46.                     [-0.459601, 2.618005],  
  47.                     [2.17768, 2.387793],  
  48.                     [-2.920969, 2.917485],  
  49.                     [-0.028814, 4.168078],  
  50.                     [3.625746, 2.119041],  
  51.                     [-3.912363, 1.325108],  
  52.                     [-0.551694, 2.814223],  
  53.                     [2.855808, 3.483301],  
  54.                     [-3.594448, 2.856651],  
  55.                     [0.421993, 2.372646],  
  56.                     [1.650821, 3.407572],  
  57.                     [-2.082902, 3.384412],  
  58.                     [-0.718809, 2.492514],  
  59.                     [4.513623, 3.841029],  
  60.                     [-4.822011, 4.607049],  
  61.                     [-0.656297, 1.449872],  
  62.                     [1.919901, 4.439368],  
  63.                     [-3.287749, 3.918836],  
  64.                     [-1.576936, 2.977622],  
  65.                     [3.598143, 1.97597],  
  66.                     [-3.977329, 4.900932],  
  67.                     [-1.79108, 2.184517],  
  68.                     [3.914654, 3.559303],  
  69.                     [-1.910108, 4.166946],  
  70.                     [-1.226597, 3.317889],  
  71.                     [1.148946, 3.345138],  
  72.                     [-2.113864, 3.548172],  
  73.                     [0.845762, 3.589788],  
  74.                     [2.629062, 3.535831],  
  75.                     // [-1.640717, 2.990517],  
  76.                     // [-1.881012, -2.485405],  
  77.                     // [4.606999, 3.510312],  
  78.                     // [-4.366462, 4.023316],  
  79.                     // [0.765015, -3.00127],  
  80.                     // [3.121904, 2.173988],  
  81.                     // [-4.025139, 4.65231],  
  82.                     // [-0.559558, -3.840539],  
  83.                     // [4.376754, 4.863579],  
  84.                     // [-1.874308, 4.032237],  
  85.                     // [-0.089337, -3.026809],  
  86.                     // [3.997787, 2.518662],  
  87.                     // [-3.082978, 2.884822],  
  88.                     // [0.845235, -3.454465],  
  89.                     // [1.327224, 3.358778],  
  90.                     // [-2.889949, 3.596178],  
  91.                     // [-0.966018, -2.839827],  
  92.                     // [2.960769, 3.079555],  
  93.                     // [-3.275518, 1.577068],  
  94.                     // [0.639276, -3.41284]  
  95.                 ];  
  96.                 var CLUSTER_COUNT = 4;  
  97.                 var DIENSIION_CLUSTER_INDEX = 2;  
  98.                 var COLOR_ALL = [  
  99.                     '#37A2DA',  
  100.                     '#37a354',  
  101.                     '#e06343',  
  102.                     '#b5bd48',    
  103.                 ];  
  104.                 var COLOR_TXT = [  
  105.                     '热度',    
  106.                     '正面',  
  107.                     '负面',  
  108.                     '特定公司'  
  109.                 ]  
  110.                 var pieces = [];  
  111.                 for (var i = 0; i < CLUSTER_COUNT; i++) {  
  112.                       
  113.                     if(i == 3){  
  114.                         pieces.push({  
  115.                             "value": i,  
  116.                             "label": COLOR_TXT[i],  
  117.                             "color": COLOR_ALL[i],  
  118.                             // "symbol": 'arrow',  
  119.                             "symbol": 'image://https://demo13-liqinwl.oss-cn-beijing.aliyuncs.com/uniapp/star.png',  
  120.                             "symbolSize": 20  
  121.                         });  
  122.                     }else{  
  123.                         pieces.push({  
  124.                             "value": i,  
  125.                             "label": COLOR_TXT[i],  
  126.                             "color": COLOR_ALL[i],  
  127.                             "symbol": 'circle',  
  128.                             "symbolSize": 10  
  129.                         });  
  130.                     }  
  131.                 }  
  132.                   
  133.                 // 'circle', 'rect’, 'roundRect’, 'triangle’, 'diamond’, 'pin’, 'arrow'  
  134.                 // pieces[2].symbol = 'arrow'  
  135.                   
  136.                   
  137.                 // visualMap参数参照https://blog.csdn.net/qq_42363090/article/details/105245615  
  138.                 let chartOptions = {  
  139.                     dataset: [{  
  140.                             source: data  
  141.                         },  
  142.                         {  
  143.                             transform: {  
  144.                                 type: 'ecStat:clustering',  
  145.                                 // print: true,  
  146.                                 config: {  
  147.                                     clusterCount: CLUSTER_COUNT,  
  148.                                     outputType: 'single',  
  149.                                     outputClusterIndexDimension: DIENSIION_CLUSTER_INDEX  
  150.                                 }  
  151.                             }  
  152.                         }  
  153.                     ],  
  154.                     tooltip: {  
  155.                         position: 'top'  
  156.                     },  
  157.                     visualMap: {  
  158.                         type: 'piecewise',  
  159.                         top: 'bottom',  
  160.                         orient:"horizontal",// 放置 visualMap 组件，水平（'horizontal'）或者竖直（'vertical'）。  
  161.                         min: 0,  
  162.                         max: CLUSTER_COUNT,  
  163.                         left: 'center', // 组件离容器左侧的距离,'left', 'center', 'right','20%'  
  164.                         splitNumber: CLUSTER_COUNT,  
  165.                         dimension: DIENSIION_CLUSTER_INDEX,  
  166.                         pieces: pieces,  
  167.                     },  
  168.                     grid: {  
  169.                         left: 30 ,// grid 组件离容器左侧的距离。可以是像 '20%' 也可以是 'left', 'center', 'right'。  
  170.                         right: 20  
  171.                     },  
  172.                     xAxis: {},  
  173.                     yAxis: {},  
  174.                     series: {  
  175.                         type: 'scatter',  
  176.                         encode: {  
  177.                             tooltip: [0, 1]  
  178.                         },  
  179.                         symbolSize: 15,  
  180.                         itemStyle: {  
  181.                             borderColor: '#555'  
  182.                         },  
  183.                         datasetIndex: 1  
  184.                     }  
  185.                 };  
  186.                   
  187.                 const _this = this  
  188.                 console.log(chartOptions)  
  189.                 echarts.registerTransform(ecStat.transform.clustering);  
  190.                 this.$refs.chart.init(config => {  
  191.                     const {  
  192.                         canvas  
  193.                     } = config;  
  194.                     const chart = echarts.init(canvas, null, config);  
  195.                     // console.log(chart,chartOptions)  
  196.                       
  197.                     canvas.setChart(chart);  
  198.                     chart.setOption(chartOptions);  
  199.                       
  200.                     // .params.name  
  201.                     chart.on('click',function(params){  
  202.                         console.log(params)  
  203.                           
  204.                         uni.navigateTo({  
  205.                             url: '/pages/list/hte2',  
  206.                             success: res => {},  
  207.                             fail: () => {},  
  208.                             complete: () => {}  
  209.                         });  
  210.                         // const currentChartsData = bubbleOptions.series[0].data[params.dataIndex]  
  211.                         // const currentTag = _this.tags[params.dataIndex]  
  212.                         // const index = graceJS.arrayIndexOf(_this.checktags, currentTag.id)  
  213.                         // // console.log(graceJS.arrayIndexOf(_this.tags, currentTag.id))  
  214.                         // if(index == -1){  
  215.                         //  // 不存在，加一组数组  
  216.                         //  _this.checktags.push(currentTag.id);  
  217.                         //  currentChartsData.itemStyle.normal.color = "#cdb659"  
  218.                         // }else{  
  219.                         //  // 已经存在  
  220.                         //  graceJS.arrayDrop(_this.checktags, index);  
  221.                         //  currentChartsData.itemStyle.normal.color = "#7b7a7a"  
  222.                         // }  
  223.                         // chart.setOption(bubbleOptions);  
  224.                     });  
  225.                     // 需要把 chart 返回  
  226.                     return chart;  
  227.                 });  
  228.   
  229.             }  
  230.         }  
  231.     }  
  232. </script>  
  233.   
  234. <style>  
  235. </style>  

 

 

 

 

本文来自于：http://www.yoyo88.cn/study/uniapp/607.html

上一篇 小程序-微信支付
下一篇 轮播图自动渐隐渐现，最后进入首页
相关的文章
Powered by yoyo苏ICP备15045725号