vue中引入echarts

一、安装echarts
二、引入echarts
- 1.全局引入
- 2.局部引入
三、vue中使用echarts
- 1.准备好函数
- 2.准备一个容器来放echarts
- 3.初始化容器
- 4.调节配置项
- 5.配置项放入容器，绘制图表
四、一些常用的配置项
- 1.折线图
- 2.柱状图
- 3.环形饼图显示百分比
五、有其他问题去翻文档：[echarts官网](https://echarts.apache.org/zh/index.html)

一、安装echarts

npm i echarts

二、引入echarts

1.全局引入

在main.js文件中：

//全局引入echarts
import * as echarts from 'echarts';
//需要挂载到Vue原型上
Vue.prototype.$echarts = echarts;

2.局部引入

let echarts = require(‘echarts’);

或者

import * as echarts from "echarts";

注意：如果echarts的版本在5.0以上，只能局部引入，全局引入会出错（好像是这样，如果不对欢迎指正）

三、vue中使用echarts

1.准备好函数

准备一个函数，并在挂载时调用

<script>
import * as echarts from "echarts";
export default {name: 'MyData',data() {return {};},mounted() {this.echartsInit();},methods: {echartsInit() {}},
};
</script>

2.准备一个容器来放echarts

配置好ref属性，用于后面初始化容器获取DOM

<div ref="chart"></div>

3.初始化容器

使用init函数

methods: {echartsInit() {//初始化容器const myChart = echarts.init(this.$refs.pro_chart); }},

4.调节配置项

option配置项从这里搞：echarts官方文档示例

echartsInit() {const myChart = echarts.init(this.$refs.pro_chart); //初始化容器const option = {这里面就是图表的各种配置项，从官方文档搞下来};}

5.配置项放入容器，绘制图表

echartsInit() {const myChart = echarts.init(this.$refs.chart); //初始化容器const option = {这里面就是图表的各种配置项，从官方文档搞下来};myChart.setOption(option);}

四、一些常用的配置项

1.折线图

option = {title: {text: '标题'},//图例的相关设置legend: {x:'center', //水平位置y:'bottom', //垂直方向位置padding: [10,0,0,0], //上右下左距离itemWidth: 30,  //图例宽itemHeight: 30, //图例高textStyle: {  //图例的字体样式fontSize: 26,  color: '#666',},data: ['类目1', '类目2'], //图例名字，要和数据的name对应},//这是鼠标移到某个数据上显示的面板配置tooltip: {trigger: 'item',triggerOn: 'click',axisPointer: {type: 'none'},formatter: function () {return '17.5KG'}},//这是一些工具，比如下面这个saveAsImage是保存为图片的选项toolbox: {show: false,feature: {saveAsImage: {}}},//图的距离grid: {left: '3%',right: '4%',bottom: '5%',top: '5%',containLabel: true},//x轴相关配置xAxis: {type: 'category',boundaryGap: false, //坐标值是展示在小头头上还是展示在头头之间，你懂的axisLabel: {//设置x轴的展示间隔interval: 0,//x轴坐标文字换行formatter: function (value, index) {var num = 5; //每行显示字数 var str = "";var valLength = value.length; //该项x轴字数  var rowNum = Math.ceil(valLength / num); // 行数  if (rowNum > 1) {for (var i = 0; i < rowNum; i++) {var temp = "";var start = i * num;var end = start + num;temp = value.substring(start, end) + "\n";str += temp;}return str;} else {return value;}}},//刻度相关配置：axisTick: {show: false,//去掉刻度},//轴线相关配置：axisLine: {show: false,  //去掉y轴的线lineStyle: {color: '#ccc'},  //设置轴线颜色},// prettier-ignoredata: ['1','1''1''1''1''1''1''1']},yAxis: {type: 'value',//隐藏y轴的横线splitLine: {show: false},//设置y轴的初始值和结束值min: '20',max: '24.5',splitNumber: 9,  //设置y轴的间隔axisLabel: {formatter: function (value) {//保留一位小数并且加上单位return value.toFixed(1) + ' °C';}},axisPointer: {snap: true},//刻度相关配置：axisTick: {show: false,//去掉刻度},//轴线相关配置：axisLine: {show: false,  //去掉y轴的线lineStyle: {color: '#ccc'},  //设置轴线颜色},},series: [{name: '类目1',type: 'line',lineStyle: {color: 'rgb(118, 162, 255, 1)', //改变折线颜色normal: {opacity: 0, //透明度，0隐藏1显示}},showSymbol: true,  //显示隐藏小圆点itemStyle: {color: 'RGBA(118, 162, 255, 1)', //小圆点的颜色},showBackground: true, //是否展示背景backgroundStyle: {color: 'RGBA(255, 228, 218, 1)'  //背景色},smooth: true, //数据是否平滑连接data: [21.1, 22.1, 23.5, 23.2, 22.5, 23.2, 22.1],},{name: '类目2',type: 'line',lineStyle: {color: 'rgb(63, 207, 153, 1)', //改变折线颜色normal: {opacity: 1, //透明度，0隐藏1显示}},showSymbol: true,  //显示隐藏折线上的小圆点itemStyle: {color: 'RGBA(63, 207, 153, 1)'},smooth: true,//数据是否平滑连接data: [21.3, 22.8, 22.5, 23.6, 21.5, 23.2, 21.1],},]
};

2.柱状图

option = {//图例legend: {x: 'center',y: 'bottom',padding: [10, 0, 3, 0],textStyle: {  //图例的字体样式color: '#fff',},data: ['类目A', '类目B']},//在容器中的位置grid: {left: '2%',right: '3%',bottom: '10%',top: '5%',containLabel: true},//悬浮卡片tooltip: {trigger: 'axis',  //坐标轴触发triggerOn: 'click', //点击显示卡片axisPointer: {type: 'none'},formatter: function () {return '奥里给'  //自定义悬浮卡片显示的数值}},xAxis: {type: 'category',data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],//去掉最下面的头头axisTick: {show: false},//刻度相关配置：axisTick: {show: false,//去掉刻度},//轴线相关配置：axisLine: {show: false,  //去掉y轴的线},},yAxis: {type: 'value',axisLabel: {formatter: function (value) {//保留一位小数并且加上单位return value + 'KG';}},//隐藏y轴的横线splitLine: {show: false},//设置y轴的初始值和结束值min: '10',max: '19',splitNumber: 9,  //设置y轴的间隔//刻度相关配置：axisTick: {show: false,//去掉刻度alignWithLabel: true, //刻度和值居中对齐},//轴线相关配置：axisLine: {show: false,  //去掉y轴的线},},series: [{name: '类目A',data: [12, 15, 15, 13, 17, 14, 13, 15, 13, 17, 14, 16],type: 'bar',barGap: '10%',  //设置柱子间隔itemStyle: {//设置渐变色opacity: 1, //透明度0隐藏，1显示barBorderRadius: [25, 25, 0, 0], //顶部的圆角弧度color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#73A2FF' }, //渐变上面{ offset: 1, color: '#11AFFA' } //渐变下面])},showBackground: true,//是否展示背景并设置颜色backgroundStyle: {color: 'RGBA(255, 228, 218, 1)'}},{name: '类目B',data: [14, 17, 14, 13, 17, 14, 15, 17, 14, 13, 17, 12],type: 'bar',itemStyle: {opacity: 1,barBorderRadius: [25, 25, 0, 0],//顶部的圆角弧度color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#3FCF98' },{ offset: 1, color: '#10CEF0' }])},showBackground: false,  //是否展示背景},]
};

3.环形饼图显示百分比

option = {//第一个是底色，第二个是高亮色color:['rgb(78,253,149)','rgb(28,39,62)'], series: [{name: '环形饼图',type: 'pie',radius: ['50%', '70%'],  //内圈占比,外圈占比hoverAnimation: false,//禁止鼠标悬停放大avoidLabelOverlap: true, //防止标签重叠//显示数值的样式label: {show: true,position: 'center', //位置formatter : function (data){// console.log(data)let a   =  data. namelet b   =  data.percent.toFixed (0) + "%"let c   =   a + ':' + b// return a+':'+breturn c  //去掉小数，加单位},},data: [{value: 95,  //第一个数值为余量的值selected:true,     //默认选中第一块label:{show:true,     //默认显示第一块fontSize: '40',fontWeight: 'bold',color: 'rgb(53,243,253)'}},{value: 5,//第二个数值为总量-余量的值，两个值加起来是总量label: {show:false}},  ]}]
};

五、有其他问题去翻文档：echarts官网

Vue中引入echarts的步骤，折线图、柱状图、饼图的常用配置项相关推荐

vue中使用echarts绘柱形图+折线图
一.完成后效果图二..vue文件完整代码 <template><divid="myMaxbar":style ...
百度推出的echarts，制表折线图柱状图饼图等的超级工具(转)
一.简介: 1.绘制数据图表,有了它,想要网页上绘制个折线图.柱状图,从此easy. 2.使用这个百度的echarts.js插件,是通过把图片绘制在canvas上在显示在页面上. 官网对echarts ...
百度推出的echarts，制表折线图柱状图饼图等的超级工具
一.简介: 1.绘制数据图表,有了它,想要网页上绘制个折线图.柱状图,从此easy. 2.使用这个百度的echarts.js插件,是通过把图片绘制在canvas上在显示在页面上. 官网对echarts ...
vue 中使用echarts 画对比折线图
第一步:npm install echarts -S 安装第二步:在main.js 全局引入 import echarts from 'echarts' Vue.prototype.$echarts ...
vue中使用Echarts绘制K线图
一.需求问题在开发项目中,我们可能会遇到这样的需求.在vue中使用Echarts绘制K线图,进行数据分析.下面是一个简单的K线图绘制,数据是伪造的,虽然不多,但是能够实现大致的K线图效果. 二.需求 ...
vue中使用echarts做一个雷达图
在vue中使用echarts做一个雷达图效果如图首先 1.安装echarts npm install echarts -S 2.使用全局使用在main.js中 // 引入echarts imp ...
Vue 中使用 Echarts 实现项目进度甘特图
Vue 中使用 Echarts 实现项目进度甘特图参考:echarts实现甘特图(项目进度/任务进度) 简易版 1. 项目中安装 echarts npm i echarts 2. 实现甘特图 < ...
vue中引入Echarts画柱状图
目录 1 引入Echarts 1.1 安装 1.2 引入 2 基本柱状图 3 多列柱状图 4 柱状图样式设置 4.1 柱条样式 4.2 柱条间距 5 动态排序柱状图 6 总结 1 引入Echarts ...
java用ftl模板循环导出word生成echarts图表折线图柱状图饼图横向表格竖向表格
写了一个月 4月20-5月20,终于完成 -一个日报大多es查的数据,有一点mysql查的数据先占个坑,回头有空记录一下

Vue中引入echarts的步骤，折线图、柱状图、饼图的常用配置项

vue中引入echarts

一、安装echarts

二、引入echarts

1.全局引入

2.局部引入

三、vue中使用echarts

1.准备好函数

2.准备一个容器来放echarts

3.初始化容器

4.调节配置项

5.配置项放入容器，绘制图表

四、一些常用的配置项

1.折线图

2.柱状图

3.环形饼图显示百分比

五、有其他问题去翻文档：echarts官网

Vue中引入echarts的步骤，折线图、柱状图、饼图的常用配置项相关推荐

最新文章

热门文章