vue脚手架使用Apache ECharts、图表、图形、nextTick、echarts、import、init、setOption、require、getElementById、document

1、安装 1.1、npm安装ECharts

npm install echarts --save

1.2、yarn安装ECharts

yarn add echarts --save

1.3、使用国内淘宝镜像安装ECharts

安装淘宝镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

使用淘宝镜像安装ECharts

cnpm install echarts -S 

2、全局引入和使用 2.1、引入ECharts

在main.js中引入ECharts。

// 在2023-03-31号引入报错 // import echarts from 'echarts'; import * as echarts from 'echarts'; // 把 echarts 挂载到Vue实例的原型上 // 并且重命名为 $echarts Vue.prototype.$echarts = echarts; 

2.2、使用ECharts

<div id="myChart" :style="{ width: '500px', height: '500px' }"> name: "eCharts", data() { return {}; }, mounted() { // 模板挂载完成后调用 this.drawEcharts(); }, methods: { drawEcharts() { // 基于准备好的dom，初始化echarts实例 // 第一种写法，不需要在当前页定义标签id // let myChart = this.$echarts.init(this.$el); // 第二种写法 let myChart = this.$echarts.init(document.getElementById("myChart")); // 绘制图表 myChart.setOption({ title: { text: 'ECharts 入门示例' }, tooltip: {}, legend: { data:['销量'] }, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }) } } } 

3、局部引入和使用

<div id="myChart" :style="{ width: '500px', height: '500px' }"> mounted() { this.$nextTick(() => { this.initChart(); }); }, methods: { initChart() { // 方式一 // let chart = echarts.init(this.$el); // 方式二 let chart = echarts.init(document.getElementById("myChart")); chart.setOption({ title: { text: "PM 2.5 均值浓度变化情况", textStyle: { color: "#000", }, x: "center", top: "5%", }, backgroundColor: "#fff", tooltip: { trigger: "axis", formatter: "value：{c}
时间：{b}", }, // 保存图片 toolbox: { top: "5%", right: "5%", iconStyle: { borderColor: "#1890ff", }, feature: { saveAsImage: { type: "png", name: "PM2.5均值浓度变化情况", }, }, }, xAxis: { type: "category", data: ["2021-09-01 10:00", "2021-09-01 11:00", "2021-09-01 12:00"], }, yAxis: { type: "value", boundaryGap: false, name: "ug/m³", splitLine: { show: false, }, // y轴不能设置值 // data: [0, 30, 60, 90], }, series: [ { data: [6, 30, 60], type: "line", }, ], }); }, } } 

4、ECharts使用文档相关链接

1、首页 2、配置项手册 3、示例