vue-echarts echarts组件更好的在vue项目中使用

vue-echarts

使用github上封装过的组件

github地址 https://github.com/ecomfe/vue-echarts
中文文档

npm & ESM

 $ npm install echarts vue-echarts复制

要在 Vue 2 下使用 vue-echarts，需要确保 @vue/composition-api 已经安装：

 npm i -D @vue/composition-api复制

mins文件夹里面进行配置

全局配置

 import Vue from 'vue'
import App from './App2.vue'
import router from './router'
import store from './store'
import ECharts from 'vue-echarts'
import 'echarts'
// import { use } from 'echarts/core'
Vue.config.productionTip = false
// 全局注册组件（也可以使用局部注册）
Vue.component('v-chart', ECharts)
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')
 复制

单独使用参考

 import Vue from 'vue'
import ECharts from 'vue-echarts'
import { use } from 'echarts/core'
// 手动引入 ECharts 各模块来减小打包体积
 
import {
  CanvasRenderer
} from 'echarts/renderers'
import {
  BarChart
} from 'echarts/charts'
import {
  GridComponent,
  TooltipComponent
} from 'echarts/components'
 
use([
  CanvasRenderer,
  BarChart,
  GridComponent,
  TooltipComponent
]);
 
// 全局注册组件（也可以使用局部注册）
Vue.component('v-chart', ECharts)
 
new Vue(...)复制

为了更小的打包体积，我们建议手动从 ECharts 引入单个图表和组件。请参考所有支持的渲染器/图表/组件。前往 →

但如果你实在需要全量引入 ECharts 从而无需手动引入模块，只需要在代码中添加：

 import "echarts";复制

实现动态echarts图标

<template>
  <v-chart class="chart" :option="option" />
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      data: this.getRandomData()
    }
  },
  computed: {
    option() {
      return {
        xAxis: {
          type: 'category',
          data: this.data.map(item => item.time)
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.data.map(item => item.value),
            type: 'line'
          }
        ]
      }
    }
  },
  methods: {
    getRandomData() {
      return [
        {
          time: '2022-9-11',
          value: Math.random() * 100
        },
        {
          time: '2022-9-11',
          value: Math.random() * 100
        },
        {
          time: '2022-9-11',
          value: Math.random() * 100
        },
        {
          time: '2022-9-11',
          value: Math.random() * 100
        }
      ]
    }
  },
  created() {
    setInterval(() => {
      this.data = this.getRandomData()
    }, 1000)
  }
}
</script>

<style scoped>
.chart {
  height: 400px;
}
</style>

复制

每秒图标动态切换一次

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nWBBIVUR-1653230859976)(C:\Users\admin\AppData\Roaming\Typora\typora-user-images\image-20220522213926959.png)]$

异常点标记

 <template>
  <v-chart class="chart" :option="option" />
</template>
 
<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      data: this.getRandomData()
    }
  },
  computed: {
    option() {
      return {
        xAxis: {
          type: 'category',
          data: this.data.map(item => item.time)
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.data.map(item => {
              if (item.hasError) {
                return {
                  value: item.value,
                  itemStyle: {
                    color: 'red'
                  }
                }
              }
              return item.value
            }),
            type: 'line'
          }
        ]
      }
    }
  },
  methods: {
    getRandomData() {
      return [
        {
          time: '2022-9-11',
          value: Math.random() * 100,
          hasError: false
        },
        {
          time: '2022-9-11',
          value: 60,
          hasError: true
        },
        {
          time: '2022-9-11',
          value: Math.random() * 100,
          hasError: false
        },
        {
          time: '2022-9-11',
          value: Math.random() * 100,
          hasError: false
        }
      ]
    }
  },
  created() {
    setInterval(() => {
      this.data = this.getRandomData()
    }, 1000)
  }
}
</script>
 
<style scoped>
.chart {
  height: 400px;
}
</style>
 复制

在这里插入图片描述

异常区间标记

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
        }
        #chart {
            width: 100vw;
            height: 100vh;
        }
    </style>
</head>
<body>
    <div id="chart"></div>
    <script src="./data.js"></script>
    <script src="../lib/echarts.min.js"></script>
    <script>
 
        const errorIndexPieces = area
            .map(a => [
                data.findIndex(d => d.date === a.from),
                data.findIndex(d => d.date === a.to),
            ]) // [ [0, 2], [4, 6] ]
            .flat(1); // [0, 2, 4, 6]
 
        const indexPieces = [0, ...errorIndexPieces, data.length - 1]; // [0, 0, 2, 4, 6, 8]
 
        const pieces = indexPieces.reduce((prev, current, i) => {
            if (!indexPieces[i + 1]) {
                return prev;
            }
            prev.push({
                gt: current,
                lte: indexPieces[i + 1],
                color: i % 2 === 0 ? 'green' : 'red',
            });
            return prev;
        }, []);
 
        const chart = echarts.init(document.getElementById('chart'));
        chart.setOption({
            xAxis: {
                type: 'category',
                data: data.map(d => d.date),
            },
            yAxis: {
                type: 'value'
            },
            visualMap: {
                show: false,
                dimension: 0,
                pieces,
            },
            series: [
                {
                    data: data.map(d => d.value),
                    type: 'line'
                }
            ],
        });
    </script>
</body>
</html>复制

data.js

 const data = [
    {
        date: '2016-05-01',
        value: 123,
    },
    {
        date: '2016-05-02',
        value: 232,
    },
    {
        date: '2016-05-03',
        value: 232,
    },
    {
        date: '2016-05-04',
        value: 501,
    },
    {
        date: '2016-05-05',
        value: 331,
    },
    {
        date: '2016-05-06',
        value: 271,
    },
    {
        date: '2016-05-07',
        value: 512,
    },
    {
        date: '2016-05-08',
        value: 561,
    },
];
 
const area = [
    {
        from: '2016-05-01',
        to: '2016-05-03',
    },
    {
        from: '2016-05-05',
        to: '2016-05-07',
    },
];复制

图标缩放见仓库

demo地址

https://gitee.com/ye-xingchen/vue-echarts-demo/tree/master/echarts
https://blog.csdn.net/qq_41999617/article/details/114080012 博客内容

vue-echarts echarts组件更好的在vue项目中使用

vue-echarts

npm & ESM

mins文件夹里面进行配置

实现动态echarts图标

异常点标记

异常区间标记

图标缩放见仓库

demo地址

运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac

前端提高篇（102）：jQuery高级方法callbacks、deferred

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

html 无序标签有序标签及表单

CSS3新增属性(15个案例代码效果图素材)

基于CSS3媒体查询的响应式旅游网站设计与实现-计算机毕设附源码 12755

vue3中getCurrentInstance不推荐使用以及在＜script setup＞中获取全局内容(三种方式)

vue选项式和组合式区别

每天10个vue面试题(七)

Vue 2 中的 `$set` 方法详解

前端哥

运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac

前端提高篇（102）：jQuery高级方法callbacks、deferred

解决npm install 报错 “npm err code 1“

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

JQuery中的load()、$

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

基于Java SpringBoot Vue HTML5药店管理系统(源码 LW 调试文档讲解等)/药店管理软件/药店进销存系统/药店库存管理系统/药店销售系统/药品管理系统/药店收银系统

基于Java SpringBoot Vue HTML5宠物健康顾问系统(源码 LW 调试文档讲解等)/宠物健康/顾问系统/宠物护理/宠物医疗/宠物保健/宠物咨询/宠物医生/宠物健康管理/宠物健康服务

1
【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001

2
CSS常用属性（文本属性）

2024-11-04 09:11:111000

3
TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000

4
CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000

5
vue使用datav echarts

2024-09-06 00:09:381000

6
使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000

7
使用CDN提高jQuery加载速度

2024-08-24 23:08:211000

8
小兔鲜儿网页首页制作黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000

9
《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000

10
npm的使用

2024-08-18 00:08:131000

	import Vue from 'vue'
	import App from './App2.vue'
	import router from './router'
	import store from './store'
	import ECharts from 'vue-echarts'
	import 'echarts'
	// import { use } from 'echarts/core'
	Vue.config.productionTip = false
	// 全局注册组件（也可以使用局部注册）
	Vue.component('v-chart', ECharts)
	new Vue({
	router,
	store,
	render: h => h(App)
	}).$mount('#app')

	import Vue from 'vue'
	import ECharts from 'vue-echarts'
	import { use } from 'echarts/core'
	// 手动引入 ECharts 各模块来减小打包体积

	import {
	CanvasRenderer
	} from 'echarts/renderers'
	import {
	BarChart
	} from 'echarts/charts'
	import {
	GridComponent,
	TooltipComponent
	} from 'echarts/components'

	use([
	CanvasRenderer,
	BarChart,
	GridComponent,
	TooltipComponent
	]);

	// 全局注册组件（也可以使用局部注册）
	Vue.component('v-chart', ECharts)

	new Vue(...)

	<template>
	<v-chart class="chart" :option="option" />
	</template>

	<script>
	export default {
	name: 'HelloWorld',
	data() {
	return {
	data: this.getRandomData()
	}
	},
	computed: {
	option() {
	return {
	xAxis: {
	type: 'category',
	data: this.data.map(item => item.time)
	},
	yAxis: {
	type: 'value'
	},
	series: [
	{
	data: this.data.map(item => {
	if (item.hasError) {
	return {
	value: item.value,
	itemStyle: {
	color: 'red'
	}
	}
	}
	return item.value
	}),
	type: 'line'
	}
	]
	}
	}
	},
	methods: {
	getRandomData() {
	return [
	{
	time: '2022-9-11',
	value: Math.random() * 100,
	hasError: false
	},
	{
	time: '2022-9-11',
	value: 60,
	hasError: true
	},
	{
	time: '2022-9-11',
	value: Math.random() * 100,
	hasError: false
	},
	{
	time: '2022-9-11',
	value: Math.random() * 100,
	hasError: false
	}
	]
	}
	},
	created() {
	setInterval(() => {
	this.data = this.getRandomData()
	}, 1000)
	}
	}
	</script>

	<style scoped>
	.chart {
	height: 400px;
	}
	</style>

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
	body {
	margin: 0;
	}
	#chart {
	width: 100vw;
	height: 100vh;
	}
	</style>
	</head>
	<body>
	<div id="chart"></div>
	<script src="./data.js"></script>
	<script src="../lib/echarts.min.js"></script>
	<script>

	const errorIndexPieces = area
	.map(a => [
	data.findIndex(d => d.date === a.from),
	data.findIndex(d => d.date === a.to),
	]) // [ [0, 2], [4, 6] ]
	.flat(1); // [0, 2, 4, 6]

	const indexPieces = [0, ...errorIndexPieces, data.length - 1]; // [0, 0, 2, 4, 6, 8]

	const pieces = indexPieces.reduce((prev, current, i) => {
	if (!indexPieces[i + 1]) {
	return prev;
	}
	prev.push({
	gt: current,
	lte: indexPieces[i + 1],
	color: i % 2 === 0 ? 'green' : 'red',
	});
	return prev;
	}, []);

	const chart = echarts.init(document.getElementById('chart'));
	chart.setOption({
	xAxis: {
	type: 'category',
	data: data.map(d => d.date),
	},
	yAxis: {
	type: 'value'
	},
	visualMap: {
	show: false,
	dimension: 0,
	pieces,
	},
	series: [
	{
	data: data.map(d => d.value),
	type: 'line'
	}
	],
	});
	</script>
	</body>
	</html>

	const data = [
	{
	date: '2016-05-01',
	value: 123,
	},
	{
	date: '2016-05-02',
	value: 232,
	},
	{
	date: '2016-05-03',
	value: 232,
	},
	{
	date: '2016-05-04',
	value: 501,
	},
	{
	date: '2016-05-05',
	value: 331,
	},
	{
	date: '2016-05-06',
	value: 271,
	},
	{
	date: '2016-05-07',
	value: 512,
	},
	{
	date: '2016-05-08',
	value: 561,
	},
	];

	const area = [
	{
	from: '2016-05-01',
	to: '2016-05-03',
	},
	{
	from: '2016-05-05',
	to: '2016-05-07',
	},
	];

vue-echarts echarts组件 更好的在vue项目中使用

vue-echarts

npm & ESM

mins文件夹里面进行配置

实现动态echarts图标

异常点标记

异常区间标记

图标缩放 见仓库

demo地址

微信扫一扫：分享

vue-echarts echarts组件更好的在vue项目中使用

图标缩放见仓库