1、安装
npm install echarts --save
2、引入
全局引入在main.js文件引入
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
按需引入
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core';
// 引入柱状图图表，图表后缀都为 Chart
import {
BarChart
} from 'echarts/charts';
// 引入提示框，标题，直角坐标系组件，组件后缀都为 Component
import {
TitleComponent,
TooltipComponent,
GridComponent
} from 'echarts/components';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import {
CanvasRenderer
} from 'echarts/renderers';
// 注册必须的组件
echarts.use(
[TitleComponent, TooltipComponent, GridComponent, BarChart, CanvasRenderer]
);
// 接下来的使用就跟之前一样，初始化图表，设置配置项
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
...
});
3、使用
<template>
<div class="app">
<div id="data-rh-body" class="data-lf-top" ></div>
</div>
</template>
<script>
var echarts=require('echarts')
export default{
methods:{
//柱状图
drawChart2() {
// 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById('data-rh-body'));
// 指定图表的配置项和数据
let option = {
grid: {
//坐标系地板的定位
left:60,
bottom:50
},
xAxis: {
type: 'category', //类名轴
data: ['5', '6', '7','8','9','10'],
axisLine: {
//坐标轴轴线相关设置
lineStyle: {
color: '#262571'//x轴线颜色设置
}
},
axisLabel: {
// 坐标轴刻度标签的相关设置
show: true,//控制显隐
textStyle: {
color: '#6FCEFF',//x轴字体颜色
fontSize: 20 //
}
},
axisTick: {
//x轴刻度相关设置
show: false
}
},
yAxis: {
axisLine: {
//坐标轴轴线相关设置
lineStyle: {
color: '#262571'
}
},
axisLabel: {
//坐标轴刻度标签的相关设置
textStyle: {
//y轴字体样式设置
color: '#CFD4EB',
fontSize:20
}
},
axisTick: {
//y轴刻度相关设置
show: false
},
splitLine: {
//坐标轴在 grid 区域中的分隔线相关设置
lineStyle: {
//线的样式设置
color: '#262571'
}
}
},
series: [
{
name: '数量',
type: 'bar',
data: [50, 125, 10,50,30,15],
barWidth: 28, //柱图宽度
itemStyle: {
//图形样式相关设置
normal: {
//自定义柱形渐变色
color: new echarts.graphic.LinearGradient(
0,
1,
0,
0,
[
{
offset: 0,
color: '#63FFFF' // 0% 处的颜色
},
{
offset: 1,
color: '#0054FF' // 100% 处的颜色
}
],
false
),
}
}
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
//若盒子宽度设为百分比，这里做自适应
window.addEventListener("resize", () => {
if(myChart){
myChart.resize()
}
})
},
//饼图案例
pieChart(val) {
console.log('饼图');
console.log(val);
let myChart = this.$echarts.init(document.getElementById('data-pie'));
myChart.setOption({
tooltip: {
//提示框组件
trigger: 'item', //item数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
},
formatter: '{a} <br/>{b} : {c} <br/>百分比 : {d}%' //{a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
},
legend: {
//导航栏指示器
top: 12.5,
right: 30,
itemWidth: 30,
itemHeight: 15,
formatter: '{name}',
textStyle: {
color: '#777777'
}
},
series: [
{
name: '品级比例',
type: 'pie', // 设置图表类型为饼图
radius: '55%', // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
center: ['50%', '55%'], //调整饼图位置
data: [
// 数据数组，name 为数据项名称，value 为数据项值
{
value: val[0], name: '一等品' },
{
value: val[1], name: '二等品' },
{
value: val[2], name: '三等品' }
],
itemStyle: {
//图形样式
normal: {
color: function(params) {
//自定义颜色
var colorList = ['#F9EC57', '#5AE1B6', '#6ADDFF'];
return colorList[params.dataIndex];
}
}
},
label: {
//文本样式
show: true,
color: '#777777',
fontSize: 12,
formatter: '{b}:{d}%' //提示文本内容
},
labelLine: {
//指示线样式设置
length: 20
}
}
]
});
//根据窗口的大小变动图表 --- 重点
window.addEventListener('resize', () => {
if (myChart) {
myChart.resize();
}
});
},
//折线图案例
brokenChart(val) {
let myChart = this.$echarts.init(document.getElementById('quasi-second'));
// 指定图表的配置项和数据
let option = {
grid: {
//坐标系地板的定位
left: 80,
bottom: 40
},
xAxis: {
type: 'category',
data: ['0','1','2','3','4','5', '6', '7', '8', '9', '10'],
axisLine: {
//坐标轴轴线相关设置
lineStyle: {
color: '#eeeeee'
}
},
axisLabel: {
// 坐标轴刻度标签的相关设置
show: true,
textStyle: {
color: '#777777',
fontSize: 12 // 让字zhi体变大dao
}
},
axisTick: {
//刻度相关设置
show: false //让刻度隐藏
}
},
yAxis: {
type: 'value',
axisLine: {
//坐标轴轴线相关设置
lineStyle: {
color: '#eeeeee'
}
},
axisLabel: {
// 坐标轴刻度标签的相关设置
show: true,
textStyle: {
color: '#777777',
fontSize: 12 // 让字体变大
}
},
axisTick: {
//y轴刻度相关设置
show: false
},
splitLine: {
//网格线
lineStyle: {
color: '#DDDDE1'
}
}
},
series: [
{
data: val,
type: 'line',
areaStyle: {
//填充的颜色
color: {
//线性渐变前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
type: 'linear',
x: 0,
y: 1,
x2: 0,
y2: 0,
colorStops: [
{
offset: 0,
color: 'rgba(29,179,121,0)' // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(116,221,168,1)' // 100% 处的颜色
}
],
globalCoord: false // 缺省为 false
}
},
itemStyle: {
//折线拐点标志的样式
normal: {
label: {
show: true,color: '#1DB379'},borderColor: '#74DDA8', //拐点的边框颜色
borderWidth: 3.5, }
},
lineStyle: {
//折线的样式
color: '#32D192'
}
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.addEventListener('resize', () => {
if (myChart) {
myChart.resize();
}
});
},
//多列柱形图
drawChart() {
// 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById("bartu"));
// 指定图表的配置项和数据
let option = {
title: {
text: "不同地域设备异常分析",
padding: [
5, // 上
10, // 右
5, // 下
80, // 左
],
},
grid: {
//坐标系的定位
top: 40,
left: 80,
bottom: 20,
},
legend: {
data: ["沙田", "九龙", "大浦"],
},
tooltip: {
trigger: "axis", //坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
},
},
xAxis: {
type: "value",
name: "数量",
axisLine: {
//坐标轴轴线相关设置
lineStyle: {
color: "#eeeeee",
},
},
axisLabel: {
// 坐标轴刻度标签的相关设置
show: true,
textStyle: {
color: "#777777",
},
// formatter: '{value}' //柱形图显示数值
},
axisTick: {
//x轴刻度相关设置
show: false,
},
},
yAxis: {
type: "category", //类名轴
inverse: true,
data: [
"1月",
"2月",
"3月",
"4月",
"5月",
"6月",
"7月",
"8月",
"9月",
"10月",
"11月",
"12月",
],
axisLine: {
//坐标轴轴线相关设置
lineStyle: {
color: "#EEEEEE",
},
},
axisLabel: {
textStyle: {
color: "#777777",
},
},
axisTick: {
//y轴刻度相关设置
show: false,
},
splitLine: {
//网格线
lineStyle: {
color: "#EEEEEE",
},
},
},
series: [
{
name: "九龙",
type: "bar",
data: [50, 80, 60, 75, 80, 62, 100, 150, 180, 123, 56, 80],
// barWidth: 35, //柱图宽度
itemStyle: {
normal: {
//柱形渐变色
// color: new echarts.graphic.LinearGradient(
// 0,
// 1,
// 0,
// 0,
// [
// {
// offset: 0,
// color: '#1DB379' // 0% 处的颜色
// },
// {
// offset: 1,
// color: '#74DDA8' // 100% 处的颜色
// }
// ],
// false
// ),
// label: {
// //图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等，label选项在 ECharts 2.x 中放置于itemStyle下
// show: true,
// position: 'top', //标签的位置
// formatter: '{c}', //百分比显示，模板变量有 {a}、{b}、{c}、{d}，分别表示系列名，数据名，数据值，百分比。{d}数据会根据value值计算百分比
// color: '#6FCEFF'
// }
},
},
},
{
name: "沙田",
type: "bar",
data: [20, 50, 70, 60, 70, 60, 50, 70, 60, 70, 50, 70],
itemStyle: {
normal: {
// label: {
// //图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等，label选项在 ECharts 2.x 中放置于itemStyle下
// show: true,
// position: 'top', //标签的位置
// formatter: '{c}', //百分比显示，模板变量有 {a}、{b}、{c}、{d}，分别表示系列名，数据名，数据值，百分比。{d}数据会根据value值计算百分比
// color: '#6FCEFF'
// }
},
},
},
{
name: "大浦",
type: "bar",
data: [20, 40, 60, 80, 20, 40, 60, 80, 20, 40, 60, 80],
itemStyle: {
normal: {
// label: {
// //图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等，label选项在 ECharts 2.x 中放置于itemStyle下
// show: true,
// position: 'top', //标签的位置
// formatter: '{c}', //百分比显示，模板变量有 {a}、{b}、{c}、{d}，分别表示系列名，数据名，数据值，百分比。{d}数据会根据value值计算百分比
// color: '#6FCEFF'
// }
},
},
},
],
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
//根据窗口的大小变动图表 --- 重点
window.addEventListener("resize", () => {
if (myChart) {
myChart.resize();
}
});
},
},
mounted(){
this.drawChart2()
}
}
</script>
<style scoped>
.app{
width: 50%;
height: 500px;
background: #000000;
margin: auto;
}
#data-rh-body{
width: 100%;
height: 100%;
}
</style>