VChart
vue - vux 2018-07-24 13:48:15

QQ截图20180724135013.png

 

HTML:

XML/HTML Code复制内容到剪贴板
  1. <v-chart :padding="[30, 'auto']" :height="200" prevent-render @on-render="renderInteractionChart"></v-chart>  

 

JavaScript Code复制内容到剪贴板
  1. // 渲染柱状图  
  2. renderInteractionChart({ chart }) {  
  3.             var data = [  
  4.                 {  
  5.                     name: "London",  
  6.                     月份: "Jan.",  
  7.                     月均降雨量: 18.9  
  8.                 },  
  9.                 {  
  10.                     name: "London",  
  11.                     月份: "Feb.",  
  12.                     月均降雨量: 28.8  
  13.                 },  
  14.                 {  
  15.                     name: "London",  
  16.                     月份: "Mar.",  
  17.                     月均降雨量: 39.3  
  18.                 },  
  19.                 {  
  20.                     name: "London",  
  21.                     月份: "Apr.",  
  22.                     月均降雨量: 81.4  
  23.                 },  
  24.                 {  
  25.                     name: "London",  
  26.                     月份: "May.",  
  27.                     月均降雨量: 47  
  28.                 },  
  29.                 {  
  30.                     name: "London",  
  31.                     月份: "Jun.",  
  32.                     月均降雨量: 20.3  
  33.                 },  
  34.                 {  
  35.                     name: "London",  
  36.                     月份: "Jul.",  
  37.                     月均降雨量: 24  
  38.                 },  
  39.                 {  
  40.                     name: "London",  
  41.                     月份: "Aug.",  
  42.                     月均降雨量: 35.6  
  43.                 },  
  44.                 {  
  45.                     name: "Berlin",  
  46.                     月份: "Jan.",  
  47.                     月均降雨量: 12.4  
  48.                 },  
  49.                 {  
  50.                     name: "Berlin",  
  51.                     月份: "Feb.",  
  52.                     月均降雨量: 23.2  
  53.                 },  
  54.                 {  
  55.                     name: "Berlin",  
  56.                     月份: "Mar.",  
  57.                     月均降雨量: 34.5  
  58.                 },  
  59.                 {  
  60.                     name: "Berlin",  
  61.                     月份: "Apr.",  
  62.                     月均降雨量: 99.7  
  63.                 },  
  64.                 {  
  65.                     name: "Berlin",  
  66.                     月份: "May.",  
  67.                     月均降雨量: 52.6  
  68.                 },  
  69.                 {  
  70.                     name: "Berlin",  
  71.                     月份: "Jun.",  
  72.                     月均降雨量: 35.5  
  73.                 },  
  74.                 {  
  75.                     name: "Berlin",  
  76.                     月份: "Jul.",  
  77.                     月均降雨量: 37.4  
  78.                 },  
  79.                 {  
  80.                     name: "Berlin",  
  81.                     月份: "Aug.",  
  82.                     月均降雨量: 42.4  
  83.                 }  
  84.             ];  
  85.             // var chart = new F2.Chart({  
  86.             //     id: "mountNode",  
  87.             //     pixelRatio: window.devicePixelRatio  
  88.             // });  
  89.             chart.source(data);  
  90.             chart.tooltip();  
  91.             chart.tooltip({  
  92.                 showItemMarker: false,  
  93.                 background: {  
  94.                     radius: 2,  
  95.                     fill: "#1890FF",  
  96.                     padding: [3, 5]  
  97.                 },  
  98.                 tooltipMarkerStyle: {  
  99.                     fill: "#1890FF",  
  100.                     fillOpacity: 0.1  
  101.                 },  
  102.                 onShow: function onShow(ev) {  
  103.                     var items = ev.items;  
  104.   
  105.                     items[0].name = null;  
  106.                     items[0].value = "$" + items[0].value + "M";  
  107.                 }  
  108.             });  
  109.             chart  
  110.                 .interval()  
  111.                 .position("月份*月均降雨量")  
  112.                 .color("name")  
  113.                 .adjust({  
  114.                     type: "dodge",  
  115.                     marginRatio: 0.05 // 设置分组间柱子的间距  
  116.                 });  
  117.             chart.render();  
  118.         }  
  119.  
  120. }  

 

 

2.png

XML/HTML Code复制内容到剪贴板
  1. <v-chart :padding="[30, 'auto']" :height="200" prevent-render @on-render="renderInteractionChart"></v-chart>  

 

JavaScript Code复制内容到剪贴板
  1. // 渲染柱状图  
  2. renderInteractionChart({ chart }) {  
  3.  
  4.             var data = [  
  5.                 {  
  6.                     name: "London",  
  7.                     月份: "Jan.",  
  8.                     月均降雨量: 18.9  
  9.                 },  
  10.                 {  
  11.                     name: "London",  
  12.                     月份: "Feb.",  
  13.                     月均降雨量: 28.8  
  14.                 },  
  15.                 {  
  16.                     name: "London",  
  17.                     月份: "Mar.",  
  18.                     月均降雨量: 39.3  
  19.                 },  
  20.                 {  
  21.                     name: "London",  
  22.                     月份: "Apr.",  
  23.                     月均降雨量: 81.4  
  24.                 },  
  25.                 {  
  26.                     name: "London",  
  27.                     月份: "May.",  
  28.                     月均降雨量: 47  
  29.                 },  
  30.                 {  
  31.                     name: "London",  
  32.                     月份: "Jun.",  
  33.                     月均降雨量: 20.3  
  34.                 },  
  35.                 {  
  36.                     name: "London",  
  37.                     月份: "Jul.",  
  38.                     月均降雨量: 24  
  39.                 },  
  40.                 {  
  41.                     name: "London",  
  42.                     月份: "Aug.",  
  43.                     月均降雨量: 35.6  
  44.                 },  
  45.                 {  
  46.                     name: "Berlin",  
  47.                     月份: "Jan.",  
  48.                     月均降雨量: 12.4  
  49.                 },  
  50.                 {  
  51.                     name: "Berlin",  
  52.                     月份: "Feb.",  
  53.                     月均降雨量: 23.2  
  54.                 },  
  55.                 {  
  56.                     name: "Berlin",  
  57.                     月份: "Mar.",  
  58.                     月均降雨量: 34.5  
  59.                 },  
  60.                 {  
  61.                     name: "Berlin",  
  62.                     月份: "Apr.",  
  63.                     月均降雨量: 99.7  
  64.                 },  
  65.                 {  
  66.                     name: "Berlin",  
  67.                     月份: "May.",  
  68.                     月均降雨量: 52.6  
  69.                 },  
  70.                 {  
  71.                     name: "Berlin",  
  72.                     月份: "Jun.",  
  73.                     月均降雨量: 35.5  
  74.                 },  
  75.                 {  
  76.                     name: "Berlin",  
  77.                     月份: "Jul.",  
  78.                     月均降雨量: 37.4  
  79.                 },  
  80.                 {  
  81.                     name: "Berlin",  
  82.                     月份: "Aug.",  
  83.                     月均降雨量: 42.4  
  84.                 }  
  85.             ];  
  86.             // var chart = new F2.Chart({  
  87.             //     id: "mountNode",  
  88.             //     pixelRatio: window.devicePixelRatio  
  89.             // });  
  90.             chart.source(data);  
  91.             chart.tooltip({  
  92.                 custom: true, // 自定义 tooltip 内容框  
  93.                 onChange: function (obj) {  
  94.                     const legend = chart.get('legendController').legends.top[0]  
  95.                     const tooltipItems = obj.items  
  96.                     const legendItems = legend.items  
  97.                     const map = {}  
  98.                     legendItems.map(item => {  
  99.                     map[item.name] = JSON.parse(JSON.stringify(item))  
  100.                     })  
  101.                     tooltipItems.map(item => {  
  102.                     const { name, value } = item  
  103.                     if (map[name]) {  
  104.                         map[name].value = value  
  105.                     }  
  106.                     })  
  107.                     legend.setItems(Object.values(map))  
  108.                 },  
  109.                 onHide: function onHide() {  
  110.                     var legend = chart.get("legendController").legends  
  111.                         .top[0];  
  112.                     legend.setItems(chart.getLegendItems().country);  
  113.                 }  
  114.             });  
  115.             chart  
  116.                 .interval()  
  117.                 .position("月份*月均降雨量")  
  118.                 .color("name")  
  119.                 .adjust({  
  120.                     type: "dodge",  
  121.                     marginRatio: 0.05 // 设置分组间柱子的间距  
  122.                 });  
  123.             chart.render();  
  124.         }  
  125.  
  126. },  

 

 3.png

JavaScript Code复制内容到剪贴板
  1. var data = [  
  2.     {  
  3.         title: "一工区",  
  4.         name: "计划进度",  
  5.         value: 18.9  
  6.     },  
  7.     {  
  8.         title: "二工区",  
  9.         name: "计划进度",  
  10.         value: 28.8  
  11.     },  
  12.     {  
  13.         title: "三工区",  
  14.         name: "计划进度",  
  15.           
  16.         value: 39.3  
  17.     },  
  18.     {  
  19.         title: "四工区",  
  20.         name: "计划进度",  
  21.         value: 81.4  
  22.     },  
  23.     {  
  24.         title: "五工区",  
  25.         name: "计划进度",  
  26.         value: 47  
  27.     },  
  28.     {  
  29.         title: "六工区",  
  30.         name: "计划进度",  
  31.         value: 20.3  
  32.     },  
  33.     {  
  34.         title: "一工区",  
  35.         name: "实际进度",  
  36.         value: 12.4  
  37.     },  
  38.     {  
  39.         title: "二工区",  
  40.         name: "实际进度",  
  41.         value: 23.2  
  42.     },  
  43.     {  
  44.         title: "三工区",  
  45.         name: "实际进度",  
  46.         value: 34.5  
  47.     },  
  48.     {  
  49.         title: "四工区",  
  50.         name: "实际进度",  
  51.         value: 99.7  
  52.     },  
  53.     {  
  54.         title: "四工区",  
  55.         name: "实际进度",  
  56.         value: 52.6  
  57.     },  
  58.     {  
  59.         title: "五工区",  
  60.         name: "实际进度",  
  61.         value: 35.5  
  62.     },  
  63.     {  
  64.         title: "六工区",  
  65.         name: "实际进度",  
  66.         value: 37.4  
  67.     },  
  68. ];  
  69. chart.legend({  
  70.     align: 'center',  
  71.     itemWidth: null, // 图例项按照实际宽度渲染  
  72.     offsetY: -15,  
  73. });  
  74. chart.source(data);  
  75. chart.tooltip({  
  76.     custom: true, // 自定义 tooltip 内容框  
  77.     onChange: function(obj) {  
  78.         const legend = chart.get("legendController").legends  
  79.             .top[0];  
  80.         const tooltipItems = obj.items;  
  81.         const legendItems = legend.items;  
  82.         const map = {};  
  83.         legendItems.map(item => {  
  84.             map[item.name] = JSON.parse(  
  85.                 JSON.stringify(item)  
  86.             );  
  87.         });  
  88.         tooltipItems.map(item => {  
  89.             const { name, value } = item;  
  90.             if (map[name]) {  
  91.                 map[name].value = value + "%";  
  92.             }  
  93.         });  
  94.         legend.setItems(Object.values(map));  
  95.     },  
  96.     onHide: function onHide() {  
  97.         var legend = chart.get("legendController").legends  
  98.             .top[0];  
  99.         legend.setItems(chart.getLegendItems().country);  
  100.     }  
  101. });  
  102. // position 将数据值映射到图形的位置上的方法，使用 * 连接，position 属性会对多个字段进行数据的映射  
  103. chart  
  104.     .interval()  
  105.     .position("title*value")  
  106.     .color("name")  
  107.     .adjust({  
  108.         type: "dodge",  
  109.         marginRatio: 0.2 // 设置分组间柱子的间距  
  110.     });  
  111. chart.render();  

 

本文来自于：http://www.yoyo88.cn/study/vux/350.html

上一篇 如何在你的Vue项目配置vux
下一篇 返回列表
相关的文章
Powered by yoyo苏ICP备15045725号