Vue项目中集成Echarts

r囧r小猫 2023-03-01 09:04 154阅读 0赞

Vue项目中集成Echarts

这里主要使用两个封装Echarts的库：

v-charts和Vue-Echarts

v-charts

github地址

v-charts官网

使用

安装

  1. npm i v-charts echarts -S

结合Element一起使用

  1. <template>
  2.     <div id="charts">
  3.       <el-tabs v-model="activeName" @tab-click="handleClick">
  4.         <el-tab-pane label="用户管理" name="first">
  5.           <ve-Scatter :data="chartData"></ve-Scatter>
  6.         </el-tab-pane>
  7.       </el-tabs>
  8.     </div>
  9. </template>
  11. <script>
  12.   //按需引入 
  13.   import VeScatter from 'v-charts/lib/scatter.common'
  14.   export default { 
  15.     components: {  VeScatter },
  16.     name: "charts",
  17.     data () { 
  18.       return { 
  19.         chartData: { 
  20.           columns: ['日期', '访问用户', '下单用户', '年龄'],
  21.           yAxisName:'demo',
  22.           xAxisName:'demo',
  23.           rows: [
  24.             {  '日期': '2020/1', '访问用户': 123, '年龄': 3, '下单用户': 1244 },
  25.             {  '日期': '2020/2', '访问用户': 1223, '年龄': 6, '下单用户': 2344 },
  26.             {  '日期': '2020/3', '访问用户': 7123, '年龄': 9, '下单用户': 3245 },
  27.             {  '日期': '2020/4', '访问用户': 4123, '年龄': 12, '下单用户': 4355 },
  28.             {  '日期': '2020/5', '访问用户': 3123, '年龄': 15, '下单用户': 4564 },
  29.             {  '日期': '2020/6', '访问用户': 2323, '年龄': 20, '下单用户': 6537 }
  30.           ]
  31.         },
  32.         activeName: 'first'
  33.       }
  34.     },
  35.     methods: { 
  36.       handleClick(tab, event) { 
  37.         console.log(tab, event);
  38.       }
  39.     }
  40.   }
  41. </script>
  43. <style scoped>
  44.   #charts{ 
  45.     height: 300px;
  46.   }
  47. </style>

效果

在这里插入图片描述

评价：

优点：

因为是饿了么团队出的，所以结合Element使用非常好，使用起来很简单

缺点：

（1）封装的图表类型有限

包含折线图、柱状图、条形图、饼图
环图、瀑布图、漏斗图、雷达图、地图、桑基图、热力图、散点图、K线图、仪表盘、树图、水球图等十几个类型，但关系图类型并没有封装，就需要使用Vue-ECharts

（2）官网配置不全

需要到Echarts中自行查询更详细的配置

Vue-ECharts

github地址

使用

安装

  1. npm install echarts vue-echarts

使用

全局注册：
  1. //main.js
  2. ...
  3. //全局引入
  4. import ECharts from 'vue-echarts'
  6. ...
  7. //注册全局组件
  8. Vue.component('v-chart', ECharts)
vue.config.js配置
  1. module.exports = { 
  2.     devServer: { 
  3.         open: true,
  4.         port: 8878
  5.     },
  6.     transpileDependencies: [
  7.       'vue-echarts',
  8.       'resize-detector'
  9.     ]
  10. }
组件中使用
  1. <template>
  2.     <v-chart :options="polar"/>
  3. </template>
  5. <script>
  7.     import ECharts from 'vue-echarts'
  8.     //按需引入
  9.     import 'echarts/lib/chart/graph'
  10.     import 'echarts/lib/component/polar'
  12.     export default { 
  13.       components: { 
  14.         'v-chart': ECharts
  15.       },
  16.       name:"Graph",
  17.       data () { 
  18.         return { 
  19.           //这里的配置是直接从Echarts中copy的
  20.           polar: { 
  21.             title: { 
  22.               text: ''
  23.             },
  24.             tooltip: { },
  25.             animationDurationUpdate: 1500,
  26.             animationEasingUpdate: 'quinticInOut',
  27.             label: { 
  28.               normal: { 
  29.                 show: true,
  30.                 textStyle: { 
  31.                   fontSize: 12
  32.                 },
  33.               }
  34.             },
  35.             legend: { 
  36.               x: "center",
  37.               show: false,
  38.               data: ["1", "2", '3']
  39.             },
  40.             series: [
  42.               { 
  43.                 type: 'graph',
  44.                 layout: 'force',
  45.                 symbolSize: 45,
  46.                 focusNodeAdjacency: true,
  47.                 roam: true,
  48.                 categories: [{ 
  49.                   name: '1',
  50.                   itemStyle: { 
  51.                     normal: { 
  52.                       color: "#009800",
  53.                     }
  54.                   }
  55.                 }, { 
  56.                   name: '2',
  57.                   itemStyle: { 
  58.                     normal: { 
  59.                       color: "#4592FF",
  60.                     }
  61.                   }
  62.                 }, { 
  63.                   name: '3',
  64.                   itemStyle: { 
  65.                     normal: { 
  66.                       color: "#3592F",
  67.                     }
  68.                   }
  69.                 }],
  70.                 label: { 
  71.                   normal: { 
  72.                     show: true,
  73.                     textStyle: { 
  74.                       fontSize: 12
  75.                     },
  76.                   }
  77.                 },
  78.                 force: { 
  79.                   repulsion: 1000
  80.                 },
  81.                 edgeSymbolSize: [4, 50],
  82.                 edgeLabel: { 
  83.                   normal: { 
  84.                     show: true,
  85.                     textStyle: { 
  86.                       fontSize: 10
  87.                     },
  88.                     formatter: "{c}"
  89.                   }
  90.                 },
  91.                 data: [{ 
  92.                   name: '节点0',
  93.                   draggable: true,
  94.                 }, { 
  95.                   name: '节点1',
  96.                   category: 1,
  97.                   draggable: true,
  98.                 }, { 
  99.                   name: '节点2',
  100.                   category: 1,
  101.                   draggable: true,
  102.                 }, { 
  103.                   name: '节点3',
  104.                   category: 1,
  105.                   draggable: true,
  106.                 }, { 
  107.                   name: '节点4',
  108.                   category: 1,
  109.                   draggable: true,
  110.                 }, { 
  111.                   name: '节点5',
  112.                   category: 1,
  113.                   draggable: true,
  114.                 }, { 
  115.                   name: '节点6',
  116.                   category: 1,
  117.                   draggable: true,
  118.                 }, { 
  119.                   name: '节点7',
  120.                   category: 1,
  121.                   draggable: true,
  122.                 }, { 
  123.                   name: '节点8',
  124.                   category: 1,
  125.                   draggable: true,
  126.                 }, { 
  127.                   name: '节点9',
  128.                   category: 1,
  129.                   draggable: true,
  130.                 }, { 
  131.                   name: '节点10',
  132.                   category: 1,
  133.                   draggable: true,
  134.                 }, { 
  135.                   name: '节点11',
  136.                   category: 1,
  137.                   draggable: true,
  138.                 }, { 
  139.                   name: '节点12',
  140.                   category: 1,
  141.                   draggable: true,
  142.                 }],
  143.                 links: [{ 
  144.                   source: 0,
  145.                   target: 1,
  146.                   category: 0,
  147.                   value: '0-1'
  148.                 }, { 
  149.                   source: 0,
  150.                   target: 2,
  151.                   value: '0-2'
  152.                 }, { 
  153.                   source: 0,
  154.                   target: 3,
  155.                   value: '0-3'
  156.                 }, { 
  157.                   source: 0,
  158.                   target: 4,
  159.                   value: '0-4'
  160.                 }, { 
  161.                   source: 1,
  162.                   target: 2,
  163.                   value: '1-2'
  164.                 }, { 
  165.                   source: 0,
  166.                   target: 5,
  167.                   value: '0-5'
  168.                 }, { 
  169.                   source: 4,
  170.                   target: 5,
  171.                   value: '4-5'
  172.                 }, { 
  173.                   source: 2,
  174.                   target: 8,
  175.                   value: '2-8'
  176.                 }, { 
  177.                   source: 0,
  178.                   target: 12,
  179.                   value: '0-12'
  180.                 }, { 
  181.                   source: 6,
  182.                   target: 11,
  183.                   value: '6-11'
  184.                 }, { 
  185.                   source: 6,
  186.                   target: 3,
  187.                   value: '6-3'
  188.                 }, { 
  189.                   source: 7,
  190.                   target: 5,
  191.                   value: '7-5'
  192.                 }, { 
  193.                   source: 9,
  194.                   target: 10,
  195.                   value: '9-10'
  196.                 }, { 
  197.                   source: 3,
  198.                   target: 10,
  199.                   value: '3-10'
  200.                 }, { 
  201.                   source: 2,
  202.                   target: 11,
  203.                   value: '2-11'
  204.                 }],
  205.                 lineStyle: { 
  206.                   normal: { 
  207.                     opacity: 0.9,
  208.                     width: 1,
  209.                     curveness: 0
  210.                   }
  211.                 }
  212.               }
  213.             ]
  214.           }
  215.         }
  216.       }
  217.   }
  219. </script>
  221. <style scoped>
  222.   .echarts { 
  223.     width: 100%;
  224.     height: 100%;
  225.   }
  226. </style>

效果

在这里插入图片描述

评价

优点

可以使用Echarts中的任何组件，而且可以直接拷贝Echarts实例的代码使用

缺点

配置略为繁琐

发表评论

表情：
评论列表 （有 0 条评论，154人围观）

还没有评论，来说两句吧...

相关阅读