1.下载依赖

  1. cnpm i echarts -S

2.模块中引入

  1. <template>
  2. <div class="analyzeSystem">
  3. <div :class="className" :id="id" :style="{height:height,width:width}" ref="myEchart"></div>
  4. </div>
  5. </template>
  6.  
  7. <script>
  8. import echarts from "echarts";
  9. export default {
  10. name: "analyzeSystem",
  11. props: {
  12. className: {
  13. type: String,
  14. default: "yourClassName"
  15. },
  16. id: {
  17. type: String,
  18. default: "yourID"
  19. },
  20. width: {
  21. type: String,
  22. default: "500px"
  23. },
  24. height: {
  25. type: String,
  26. default: "500px"
  27. }
  28. },
  29. data() {
  30. return {
  31. chart: null
  32. };
  33. },
  34. mounted() {
  35. this.initChart();
  36. },
  37. beforeDestroy() {
  38. if (!this.chart) {
  39. return;
  40. }
  41. this.chart.dispose();
  42. this.chart = null;
  43. },
  44. methods: {
  45. initChart() {
  46. this.chart = echarts.init(this.$refs.myEchart);
  47. // 把配置和数据放这里
  48. this.chart.setOption({
  49. backgroundColor: "#2c343c",
  50.  
  51. title: {
  52. text: "Customized Pie",
  53. left: "center",
  54. top: 20,
  55. textStyle: {
  56. color: "#ccc"
  57. }
  58. },
  59.  
  60. tooltip: {
  61. trigger: "item",
  62. formatter: "{a} <br/>{b} : {c} ({d}%)"
  63. },
  64.  
  65. visualMap: {
  66. show: false,
  67. min: 80,
  68. max: 600,
  69. inRange: {
  70. colorLightness: [0, 1]
  71. }
  72. },
  73. series: [
  74. {
  75. name: "访问来源",
  76. type: "pie",
  77. radius: "55%",
  78. center: ["50%", "50%"],
  79. data: [
  80. { value: 335, name: "直接访问" },
  81. { value: 310, name: "邮件营销" },
  82. { value: 274, name: "联盟广告" },
  83. { value: 235, name: "视频广告" },
  84. { value: 400, name: "搜索引擎" }
  85. ].sort(function(a, b) {
  86. return a.value - b.value;
  87. }),
  88. roseType: "radius",
  89. label: {
  90. normal: {
  91. textStyle: {
  92. color: "rgba(255, 255, 255, 0.3)"
  93. }
  94. }
  95. },
  96. labelLine: {
  97. normal: {
  98. lineStyle: {
  99. color: "rgba(255, 255, 255, 0.3)"
  100. },
  101. smooth: 0.2,
  102. length: 10,
  103. length2: 20
  104. }
  105. },
  106. itemStyle: {
  107. normal: {
  108. color: "#c23531",
  109. shadowBlur: 200,
  110. shadowColor: "rgba(0, 0, 0, 0.5)"
  111. }
  112. },
  113.  
  114. animationType: "scale",
  115. animationEasing: "elasticOut",
  116. animationDelay: function(idx) {
  117. return Math.random() * 200;
  118. }
  119. }
  120. ]
  121. });
  122. }
  123. }
  124. };
  125. </script>
  126.  
  127. <style>
  128.  
  129. </style>

3.效果展示

4.如果配置里的数据是请求来的

  1. initChart() {
  2. this.chart = echarts.init(this.$refs.myEchart);
  3. // 把配置和数据放这里
  4. this.axios.get('/url').then((data) => {
  5. this.chart.setOption({
  6.  
  7. })
  8. })
  9. }

vue中使用echarts的更多相关文章

  1. 在vue中使用echarts图表

    在vue中使用echarts图表   转载请注明出处:https://www.cnblogs.com/wenjunwei/p/9815290.html 安装vue依赖 使用npm npm instal ...

  2. 在vue中调用echarts中的地图散点图~

    首先!当然是在vue中引入echarts! 命令行  npm install echarts --save 在main.js文件中里引入        import echarts from 'ech ...

  3. Vue中使用ECharts画散点图加均值线与阴影区域

    [本文出自天外归云的博客园] 需求 1. Vue中使用ECharts画散点图 2. 在图中加入加均值线 3. 在图中标注出阴影区域 实现 实现这个需求,要明确两点: 1. 知道如何在vue中使用ech ...

  4. 记录下vue 中引用echarts 出现 "TypeError: Cannot read property 'getAttribute' of undefined"问题

    今天做项目,用echarts展示数据 ,自己测试 先测试 了下.写的代码html: <div ref="myChart" style="height:300px;w ...

  5. vue中使用echarts(vue+vue-cli+axios+jsonp+echarts)

    一.安装echarts: cnpm i echarts -D 二.在vue-cli的main.js文件中引用echarts: import charts from 'echarts' Vue.prot ...

  6. VUE中集成echarts时 getAttribute of null错误

    错误 错误场景一: 错误提示: 在运行Vue项目时出现了上述错误,出现该错误的原因是Echarts的图形容器还未生成就对其进行了初始化所造成的,代码如下: // 基于准备好的dom,初始化echart ...

  7. vue中使用echarts的两种方法

    在vue中使用echarts有两种方法一.第一种方法1.通过npm获取echarts npm install echarts --save 2.在vue项目中引入echarts 在 main.js 中 ...

  8. 在vue中使用Echarts画曲线图(异步加载数据)

    现实的工作中, 数据不可能写死的,所有的数据都应该通过发送请求进行获取. 所以本项目的需求是请求服务器获得二维数组,并生成曲线图.曲线图的横纵坐标均从获得的数据中取得. Echarts官方文档: ht ...

  9. vue中添加echarts

    方法一:全局引入echarts 步骤: 1.全局安装 echarts依赖.        cnpm install echarts -- save 2.引入echarts模块,在Vue项目的main. ...

  10. 在VUE中使用Echarts

    第一步:下载echarts npm install echarts --save 第二步:在项目中main.js引入 import echarts from 'echarts' Vue.prototy ...

随机推荐

  1. python的一些基本概念知识和面试题

    对于机器学习算法工程师而言,Python是不可或缺的语言,它的优美与简洁令人无法自拔.那么你了解过Python编程面试题吗?从Python基础到网页爬虫你是否能全方位Hold住?今天,机器之心为读者们 ...

  2. mysql设置指定ip访问,用户权限相关操作

    基础语法GRANT priv_type ON database.table TO user[IDENTIFIED BY [PASSWORD] 'password'] [,user [IDENTIFIE ...

  3. LeetCode 888 Fair Candy Swap 解题报告

    题目要求 Alice and Bob have candy bars of different sizes: A[i] is the size of the i-th bar of candy tha ...

  4. webstorm背景颜色更改

    一.file --> settings 二.editor-->color scheme  然后右边下拉选择 三.apply -- > ok

  5. byte数组存储到mysql

    public int AddVeinMessage(byte[] data)//插入数据库 { using (BCSSqlConnection = new MySqlConnection(strCon ...

  6. Asp.net Mvc post表单提交多个实体模型

    上一遍说道用Tuple实现Asp.net Mvc action返回多个模型实体给view,此篇发过来,实现view表单提交多个实体模型到action. 1.view代码: @{ Layout = nu ...

  7. linux export source

  8. (4.2)mysql备份还原——备份概述

    1.什么情况下会用到备份呢? [1.1]灾难恢复 [1.2]单位审计:数据库在过去某一个点是什么样的 [1.3]跨机房灾备:异地备份 [1.4]认为的DDL或者DML语句,导致主从库的数据消失 [1. ...

  9. HBase 的MOB压缩分区策略介绍

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/zNZQhb07Nr/article/details/79832392 HBase应用场景很广泛.社区 ...

  10. 【剑指offer】最小的K个数

    一.题目: 输入n个整数,找出其中最小的K个数.例如输入4,5,1,6,2,7,3,8这8个数字,则最小的4个数字是1,2,3,4,. 二.思路: 一群大牛在讨论用噼里啪啦各种排序,复杂度一般也都是O ...