在内网中 vue项目添加ECharts图表插件
原文地址:https://www.cnblogs.com/aknife/p/11753854.html
最近项目中要使用到图表
但是项目在内网中无法直接使用命令安装
然后我在外网中弄个vue的项目(随便什么项目)
先使用npm install echarts --save
安装
然后在项目node_modules下会出现这两个文件
解压拿到内网项目中,放到相同位置
然后在main.js中加2行代码
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
接着在package.json中加 "echarts": "^4.4.0",
接着创建一个.vue文件试试,直接粘贴以下代码即可
<template>
<div id="pieReport"
style="width: 400px;height: 300px;"></div>
</template>
<script>
export default {
name: "",
data () {
return {
charts: "",
opinion: ["及格人数", "未及格人数"],
opinionData: [
{ value: , name: "及格人数", itemStyle: "#1ab394" },
{ value: , name: "未及格人数", itemStyle: "#79d2c0" }
]
};
}, mounted () {
this.$nextTick(function () {
this.drawPie("pieReport");
});
}, methods: {
drawPie (id) {
this.charts = this.$echarts.init(document.getElementById(id));
this.charts.setOption({
tooltip: {
trigger: "item",
formatter: "{a}<br/>{b}:{c} ({d}%)"
},
legend: {
bottom: ,
left: "center",
data: this.opinion
},
series: [
{
name: "状态",
type: "pie",
radius: "65%",
center: ["50%", "50%"],
avoidLabelOverlap: false,
itemStyle: {
emphasis: {
shadowBlur: ,
shadowOffsetX: ,
shadowColor: "rgba(0, 0, 0, 0.5)"
},
color: function (params) {
//自定义颜色
var colorList = ["#1ab394", "#79d2c0"];
return colorList[params.dataIndex];
}
},
data: this.opinionData
}
]
});
}, }
}
</script>
完美!!
在内网中 vue项目添加ECharts图表插件的更多相关文章
- 为 VUE 项目添加 PWA 解决发布后刷新报错问题
为什么要给 VUE 项目添加 PWA 为什么要添加?因为不管是部署在 IIS,还是 nginx,每次应用部署后,再次访问因为旧的 js 已经不存在,所以页面访问的时候会整个报错,报错的结果就是一个白屏 ...
- 如何为你的 Vue 项目添加配置 Stylelint
如何为你的 Vue 项目添加配置 Stylelint 现在已经是 9102 年了,网上许多教程和分享帖都已经过期,照着他们的步骤来会踩一些坑,如 stylelint-processor-html 已经 ...
- 关于MySQL在内网中使用另一台机器访问的问题
要在内网中访问另一台机器的MySQL数据库,需要两步操作 一是把运行MySQL的机器的3306端口打开,最好是能限制访问IP保证安全性. 二是更改MySQL账户的访问权限.MySQL的root账户默认 ...
- vue项目使用echarts按需引入实现地图动态显示效果时,报错:TypeError: Cannot read property 'dataToPoint' of undefined
vue项目使用echarts按需引入实现地图动态显示效果时,报错:TypeError: Cannot read property 'dataToPoint' of undefined 借鉴了该大神的文 ...
- Windows Server2008服务器可以远程桌面,但在内网中却Ping不通--解决方法
Windows Server2008服务器可以通过远程桌面登录,但在内网中却Ping不通.所以要考虑的是防火墙是不是做了限制. 最简单粗暴的方法是直接把防火墙给关掉 还有个其他的方法是参考别人写的,我 ...
- Android studio中为项目添加模块依赖的过程
https://blog.csdn.net/cheng__lu/article/details/74574582 Android studio中为项目添加模块依赖的过程 1.点击菜单file>p ...
- Vue项目添加动态浏览器头部title
0. 直接上 预览链接 + 效果图 Vue项目添加动态浏览器头部title 1. 实现思路 ( 1 ) 从路由router里面得到组件的title ( 2 ) title存vuex (本项目已经封装h ...
- vue3.x版本安装element-ui、axios及echarts图表插件
项目中安装使用element-UI 命令行: vue add element 安装成功后,项目会自动将element-UI引入项目中,刷新项目即可 项目中安装使用axios数据请求 vue add a ...
- ECharts图表插件(4.x版本)使用(一、关系图force节点显示为自定义图像/图片,带分类选择)
导读 ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safar ...
随机推荐
- walk
一个go做gui的包, 可以配置程序图标 编译运行需要...fest文件 rsrc
- Noip2019暑期训练2
题目名称 骑士遍历 和谐俱乐部 农场派对 对称二叉树 存盘文件名 knight Beautiful party tree 输入文件名 knight.in Beautiful.in party.in ...
- sip user Authentication and 401
https://www.vocal.com/sip-2/sip-user-authentication/ https://tools.ietf.org/html/rfc3261 SIP User Au ...
- javassist使用全解析
Java 字节码以二进制的形式存储在 .class 文件中,每一个 .class 文件包含一个 Java 类或接口.Javaassist 就是一个用来 处理 Java 字节码的类库.它可以在一个已经编 ...
- HBase 介绍
HBase的列族式存储 列族式存储的概念 HBase Table的组成 Table = RowKey + Family + Column + Timestamp + Value 数据存储模式 (Row ...
- php 调用微信上传临时素材接口 {“errcode”:41005,”errmsg”:”media data missing hint”}
原因:由于PHP5.6以前与之后的版本curl_setopt有差异.PHP5.6以后不再支持”@文件路径”的方式. $picPath= "public\public\upload\xxx.p ...
- easyui 如何为datagrid添加自定义列属性(如:width,align,editor)
我在实际业务需要为datagrid添加一个自定义属性 原先的datagrid列属性包括:title.width.align.formattter.editor等 我们可以通过datagrid的一个方法 ...
- 算法名称 Alias Method
public class AliasMethod { /* The probability and alias tables. */ private int[] _alias; private dou ...
- PHP 发送 POST 值到任意 url
以下方法可以实现将 POST 值发送到 url,并获取返回值 $url = 'http://www.someurl.com'; $myvars = 'myvar1=' . $myvar1 . '&am ...
- Oracle系列十二 约束
约束是表级的强制规定有以下五种约束: NOT NULL UNIQUE PRIMARY KEY FOREIGN KEY CHECK 注意事项 如果不指定约束名 ,Oracle server 自动按照 S ...