vue2中使用echarts

1.安装： npm install echarts --save

2、在main.js中引入echarts
import * as echarts from "echarts";
Vue.prototype.$echarts = echarts;

3.页面中使用

<template><!-- 合同类型 --><div class="echarts"><div v-if="pieData.length==0">//没有值的时候显示<h4>合同地域分布</h4><el-empty description="暂无数据" :image="require('../../assets/png/缺省图 (1)暂无代办.png')"></el-empty></div><template v-else><div class="pie" ref="pie" style="width: 100%; height: 350px"></div></template></div>
</template><script>
//引入接口
import {incomeStatistics, //收入统计contractLineChart, //合同折线图contractArealDistribution, //合同地域分布
} from "@/api/other/contract.js";export default {data () {return {pieData: [], //饼图}},created () {this.getPie(); //地域饼状图//方法一：created()延迟加载getChart方法，先加载dom，否则会报错//方法二：使用mounted()挂载setTimeout(() => {this.inOrigin(); // 地域分布}, 2000);},mounted () {},methods: {// 地域饼状图inOrigin () {let myChart = this.$echarts.init(this.$refs.pie);// 地域分布---圆形饼状图let optionPie = {tooltip: {trigger: 'item',},title: {show: true,text: "地域分布",textStyle: {fontSize: 16,fontweight: 600,color: ' #292B33',},},legend: {orient: "horizontal",icon: "circle",itemHeight: 8,itemWidth: 8,bottom: "15%",left: "0% ",},color: ["#5B8FF9", "#00CCCC ", "#F6BD16 ", "##FF3343", "#9661BC"],series: [{// name: "Access From",type: 'pie',radius: ['20%', '45%'],center: ['50%', '45%'],// roseType: 'area',// 鼠标悬浮animation: false,avoidLabelOverlap: false,//  取消牵引线label: {normal: {show: false,},},labelLine: {normal: {show: false}},// label: {//   formatter: "{c}",// },data: this.pieData,},],};//图标自适应let listener = function () {myChart.resize()}window.addEventListener('resize', listener)//图标自适应myChart.setOption(optionPie);},// 接口--地域饼状图getPie () {contractArealDistribution().then((res) => {let data = res.data;for (let i = 0; i < data.length; i++) {this.pieData.push({value: data[i].contractQuantity,name: data[i].province,});}});},},
}
</script>

vue2中使用echarts相关推荐

在vue2中使用echarts,vue-echarts,v-charts
一.在vue2中使用echarts 在vue2中使用echarts,和在原生js中使用echarts步骤差不多,只不过我们需要在mounted钩子中写逻辑代码,具体步骤如下, 安装`echarts`` ...
vue中echarts调用接口_在vue2中使用echarts (Vue-ECharts插件）
Vue-ECharts ECharts 的 Vue.js 组件. 基于 ECharts v4.1.0 + 开发,依赖 Vue.js v2.2.6 +. 安装 npm(推荐方式) $ npm insta ...
【3d地图】vue中使用echarts geo3D
文章目录前言一.echarts是什么? 二.使用步骤 1.引入echarts库,3d地图必须安装echarts-gl依赖 2.制作地图JSON文件 2.1 制作自己的json 3.引入到vue组件 ...
【Echarts】在Vue中使用Echarts
在Vue中使用Echarts 引入第三方库vue-echarts vue-echarts安装与使用 vue2中使用Echarts vue-echarts安装 vue2中使用Echarts vue3中使 ...
vue 引入json地图_在vue2.x中使用echarts,地图或者theme引入js 文件，会有问题，地图的json文件重新注册可以...
One-line summary [问题简述] 在vue2.x中使用echarts,地图或者theme引入会有问题 import echarts from 'echarts/dist/echarts' ...
vue2项目中封装echarts地图的比较优雅的方式
以前写过 vue项目中封装echarts的比较优雅的方式,大屏可视化里面,除了数据图表很常用,显示省市地图区域也是很常用到的,这是姐妹篇. 区域地图选区域时,需要弹窗展示数据,样式是各种各样的,各种排 ...
vue2.0_在vue中使用echarts图表插件
说明:本例子基于vue-cli脚手架搭建首先,安装echarts依赖 npm install echarts -S 注:安装NodeJS之后,使用npm来安装包使用的是国外的地址,经常会出现超时错误 ...
[VUE2/VUE3]基于echarts的动态折线图组件
[VUE2/VUE3]基于echarts的动态折线图组件时间格式化代码 export default function formatSecond(value: number) {let millis ...
【3d地图】vue3.0中使用echarts geo3D
文章目录前言一.echarts是什么? 二.使用步骤 1.引入echarts库,3d地图必须安装echarts-gl依赖 2.制作地图JSON文件 3.引入到vue组件中总结前言之前我们已经 ...

vue2中使用echarts

vue2中使用echarts相关推荐

最新文章

热门文章