Vue 使用Echarts

在vue中使用echarts有两种方法

一、安装并全局引入

1、通过npm获取echarts

npm install echarts --save

2、在 main.js 中添加下面两行代码

import * as echarts from 'echarts'Vue.prototype.$echarts = echarts //挂载到Vue实例上面

二、使用 https://echarts.apache.org/examples/zh/index.html#chart-type-pie

<template><div><div class="container"><div id="echart"></div></div></div>
</template>
<script>
export default {data() {return {};},// 页面初始化挂载dommounted() {this.getLoadEcharts();},methods: {getLoadEcharts() {var myChart = this.$echarts.init(document.getElementById("echart"));var colorList = ["#4FE894", "#EF0C27", "#FEE7EA"];var listData = [{ name: "不明", value: 20 },{ name: "已判明", value: 20 },{ name: "未发现", value: 20 }];var option = {color: colorList,title: {x: "center",y: "center",textStyle: {color: "#000",fontSize: 20}},legend: {orient: "vertical",bottom: 5,align: "right",right: 15,textStyle: {color: "#000",fontSize: 20},selectedMode: false,data: ["元素1", "元素2", "元素3"]},tooltip: {trigger: "item"},series: [{type: "pie",center: ['50%', '50%'],radius: ['55%', '35%'],itemStyle: {normal: {color: function(params) {return colorList[params.dataIndex];}}},label: {show: true,fontSize: 10,color: "#000",formatter: function(data) {return data.name + ":" + data.percent.toFixed(0) + "%";}},labelLine: {normal: {length: 15,length2: 15,lineStyle: {width: 2}}},data: listData}]};myChart.setOption(option);}}
};
</script>
<style scoped>
.container{width: 300px;height: 300px;margin-left: 30px;
}
#echart{width: 100%;height: 100%;
}
</style>

Vue 使用Echarts相关推荐

Vue：echarts画图实战，异步获取数据在Vue上使用echarts进行画图
Vue:echarts画图实战,异步获取数据在Vue上使用echarts进行画图一.效果图二.资源主题编辑器 ECharts 教程实现代码------想要进行实战的同学可以研究以下代码,下面的 ...
Vue：echarts的柱状图怎样按照比例缩小？
Vue:echarts的柱状图怎样按照比例缩小? 资源: vue制作echart图表随着画面等比例放大缩小第二种方法:在div中使用echarts,利用div的参数来限制echarts生成的图表的大 ...
Vue：echarts的柱状图为什么X轴上的文字不显示？
Vue:echarts的柱状图为什么X轴上的文字不显示? 资源: echarts x轴文字显示不全(解决方案) echarts柱状图X轴底部文字有的不显示出来?
Vue：Vue和ECharts，在Vue上进行可视化处理，在Vue上画图
Vue:Vue和ECharts,在Vue上进行可视化处理,在Vue上画图一.预科知识 Vue CLI ECharts 二.资源在Vue中使用echarts 如何在 Vue 项目中使用 echart ...
vue使用echarts可视化图形插件
1.安装echarts: cnpm/npm i echarts -S 2.main.js中 import echarts from 'echart' Vue.prototype.$echa ...
echarts grid的样式位置_vue使用Echarts vue使用Echarts滚动条
最近公司一个项目需要绘制图标,数据很多都要放在一张图标上面,说起图标肯定先想到Echarts , 刚好Echarts也配置了滚动条.下面分享一下 github: loever/vueEchartsg ...
Vue将echarts数据导出成excel文件
Vue将echarts数据导出成excel文件一.下载vendor插件下载 vendor 文件放置项目的 src 目录下链接:https://pan.baidu.com/s/1XYYQ186zo ...
vue项目echarts通过cdn或npm引入
1. vue版本号: 2.6.11 2. vue-cli版本号: 4.5.11 3. 通过CDN的方式引入 3 3.1 .线上链接 1.首先先在public文件夹下的html页面中引入 <scr ...
vue使用echarts图表自适应的几种解决方案
这篇文章主要给大家介绍了关于vue使用echarts图表自适应的几种解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧 1. ...
Vue 之 echarts 图表数据可视化的基础使用（简单绘制各种图表、地图）
Vue 之 echarts 图表数据可视化的基础使用(简单绘制各种图表.地图) 目录 Vue 之 echarts 图表数据可视化的基础使用(简单绘制各种图表.地图) 一.简单介绍二.环境搭建三.使 ...

Vue 使用Echarts

Vue 使用Echarts相关推荐

最新文章

热门文章