Vue引用echarts超详细步骤(附图文)
更新时间：2023年08月16日 10:17:49 作者：weixin_43778617
这篇文章主要给大家介绍了关于Vue引用echarts超详细步骤,vue中优雅的使用echarts在前端工作中,数据可视化用得最多的,可能就是图表了,需要的朋友可以参考下
1、在要用的组件页加一个id：main
<!-- echart -->
<div id="main" style="height: 200px; width: 200px"></div>
<div>11111</div>
2、在终端执行安装echarts命令： npm install echarts
3、引用echarts（5.0版本需要加 * as ）： import * as echarts from "echarts";
4、打开Apache ECharts官网：https://echarts.apache.org/examples/zh/index.html
选择自己需要的图，这里是一个雷达图，我自己调整好样式后的代码：
option = {
radar: {
// shape: 'circle',
radius:"66%",
center:["50%","42%"],
splitNumber:8,
splitArea:{
areaStyle:{
color:"rgba(127,95,132,.3)",
opacity:1,
shadowBlur:45,
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowOffsetX:0,
shadowOffsetY :15,
}
},
indicator: [
{ name: '销售', max: 6500 },
{ name: '政府', max: 16000 },
{ name: '信息技术', max: 30000 },
{ name: '客户支持', max: 38000 },
{ name: '发展', max: 52000 },
{ name: '市场', max: 25000 }
]
},
legend: {
left:"center",
bottom:"10",
data: ['分配预算', '预计支出','实际支出']
},
series: [
{
type: 'radar',
symbolSize:0,
areaStyle:{
normal:{
shadowBlur:13,
shadowColor:"rgba(0,0,0,.2)",
shadowOffsetX:0,
shadowOffsetY:10,
opacity:1,
}
},
data: [
{
value: [5000, 7000, 12000, 11000, 15000, 14000],
name: "分配预算",
},
{
value: [4000, 9000, 15000, 15000, 13000, 11000],
name: "预计支出",
},
{
value: [5500, 11000, 12000, 15000, 12000, 12000],
name: "实际支出",
},
]
}
]
};
script完整代码如下：
可以自己调整样式，在api文档有对照解释，链接如下，可供学习与参考：https://echarts.apache.org/zh/api.html#echarts
<script>
// echarts
import * as echarts from "echarts";
export default {
data() {
return {
chartDom: "",
myChart: "",
option: "",
};
},
mounted() {
this.$nextTick(() => {
this.chartDom = document.getElementById("main");
this.myChart = echarts.init(this.chartDom);
this.initChart();
});
},
methods: {
initChart() {
console.log(document.getElementById("main"), "----d");
// return;
// this.chart = echarts.init(this.$el, "macarons");
this.option = {
radar: {
// shape: 'circle',
radius: "66%",
center: ["50%", "42%"],
splitNumber: 8,
splitArea: {
areaStyle: {
color: "rgba(127,95,132,.3)",
opacity: 1,
shadowBlur: 45,
shadowColor: "rgba(0, 0, 0, 0.5)",
shadowOffsetX: 0,
shadowOffsetY: 15,
},
},
indicator: [
{ name: "销售", max: 6500 },
{ name: "政府", max: 16000 },
{ name: "信息技术", max: 30000 },
{ name: "客户支持", max: 38000 },
{ name: "发展", max: 52000 },
{ name: "市场", max: 25000 },
],
},
legend: {
left: "center",
bottom: "10",
data: ["分配预算", "预计支出", "实际支出"],
},
series: [
{
type: "radar",
symbolSize: 0,
areaStyle: {
normal: {
shadowBlur: 13,
shadowColor: "rgba(0,0,0,.2)",
shadowOffsetX: 0,
shadowOffsetY: 10,
opacity: 1,
},
},
data: [
{
value: [5000, 7000, 12000, 11000, 15000, 14000],
name: "分配预算",
},
{
value: [4000, 9000, 15000, 15000, 13000, 11000],
name: "预计支出",
},
{
value: [5500, 11000, 12000, 15000, 12000, 12000],
name: "实际支出",
},
],
},
],
};
this.option && this.myChart.setOption(this.option);
},
//
},
};
</script>效果如下：
总结
到此这篇关于Vue引用echarts超详细步骤的文章就介绍到这了,更多相关Vue引用echarts内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:
相关文章
在 Typescript 中使用可被复用的 Vue Mixin功能
这篇文章主要介绍了在 Typescript 中使用可被复用的 Vue Mixin功能，非常不错，具有参考借鉴价值,需要的朋友可以参考下2018-04-04
一文解决vue2 element el-table自适应高度问题
在写公司后台项目的时候遇到一个需求,要求表格页面不能有滚动条,所以必须封装一个公共方法来实现表格自适应高度,本问小编给大家介绍了如何解决vue2 element el-table自适应高度问题,需要的朋友可以参考下2023-11-11
eslint是一个JavaScript的校验插件，通常用来校验语法或代码的书写风格。这篇文章主要介绍了vue项目关闭eslint校验,需要的朋友可以参考下2018-03-03
这篇文章主要介绍了vue vue-esign签字板的实例讲解，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
electron-vue 项目添加启动loading动画的实现思路
electron-vue脚手架搭建的项目，在开发阶段可能你注意不到项目启动慢的问题，但是在build 生成的exe可执行文件，启动后，要反应很久才能进入到app.vue 中加载的页面，体验性很差，本文给大家介绍electron vue启动动画效果的实例代码，感兴趣的朋友一起看看吧2022-01-01
vue.js开发实现全局调用的MessageBox组件实例代码
最近学习了Vue.js，感觉组件这个地方知识点挺多的，而且很重要，所以决定记录下，下面这篇文章主要给大家介绍了关于利用vue.js开发实现全局调用的MessageBox组件的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面来一起看看吧。2017-11-11
Vue3+Element-Plus使用Table预览图片发生元素遮挡的解决方法
这篇文章主要介绍了Vue3+Element-Plus使用Table预览图片发生元素遮挡的问题分析和解决方法,文中通过代码示例讲解的非常详细,对大家解决问题有一定的帮助,需要的朋友可以参考下2024-04-04
这篇文章主要介绍了vue项目设置打包后的静态文件访问路径,vue项目的最终项目文件需要经过打包输出,静态文件的访问路径需要在vue.config.js文件中设置,本文给大家介绍的非常详细,需要的朋友可以参考下2024-02-02
这篇文章主要介绍了通过命令创建vue项目的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
Vue数据双向绑定原理：Vue内部通过Object.defineProperty方法属性拦截的方式，把data对象里每个数据的读写转化成getter/setter，当数据变化时通知视图更新2022-08-08
最新评论