折线图
1.引入js库
npm i -S echarts 一定加-S，项目上线后dependencies才找的到
在main.js中
import * as Echarts from 'echarts' 安装的是echarts5要加* as,4不用
Vue.prototype.$echarts = Echarts
这样就不用每个组件引入echarts时就不用import了，直接使用$echarts就可以实现。
2.编写渲染容器DOM,编写width和height属性。
<div id="total-orders-chart" :style="{width:'100%',height:'100%'}"></div>
3.获取渲染DOM对象
mouted () {
const chartDom = document.getElementById('total-orders-chart')
}
4.编写option参数
5.调用setOption完成渲染
mounted () {
const chartDom = document.getElementById('total-orders-chart')
const chart = this.$echarts.init(chartDom) // 到此步完成echarts的初始化
// init方法参数：
// 第一个是dom，就是你要把图标渲染到哪个dom上。
// 第二个参数是样式，有light和dark两种样式。
// 第三个是option,
chart.setOption({
// x轴
xAxis: {
// type: 'value', 默认是value,直线图
type: 'category', // 就变成折现图了
show: false, // 隐藏x轴
boundaryGap: false // 把默认的距离两侧x轴的边距取消
},
// y轴
yAxis: {
show: false // 隐藏Y轴
},
// 系列对应图表，一个系列就是一张图。
series: [
{
// 渲染折线图
type: 'line',
// 通过data指定绘图数据
data: [620, 432, 220, 534, 790, 240, 580],
areaStyle: {
color: 'purple' // 设置面积区域样式，将面积区域颜色设置为紫色
},
smooth: true, // 让图表更加平滑的展示
lineStyle: {
// 设置线的样式
width: 0 // 线就没了
},
itemStyle: {
// 设置每个点的样式
opacity: 0 // 点就不显示了
}
}
],
grid: {
// 布局
top: 0,
bottom: 0,
right: 0,
left: 0
}
})
}
柱状图
mounted () {
const chartDom = document.getElementById('today-user-charts')
const chart = this.$echarts.init(chartDom) // 到此步完成echarts的初始化
chart.setOption({
color: ['#3398db'], // 设置柱状图颜色
// x轴
xAxis: {
type: 'category', // value,直线图
show: false, // 隐藏x轴
boundaryGap: false, // 把默认的距离两侧x轴的边距取消
data: [
'01:00',
'00:00',
'00:00',
'01:00',
'00:00',
'01:00',
'00:00',
'01:00',
'00:00',
'00:00',
'00:00',
'01:00',
'00:00',
'01:00'
]
},
// y轴
yAxis: {
show: false // 隐藏Y轴
},
// 系列对应图表，一个系列就是一张图。
series: [
{
// 渲染柱状图
type: 'bar',
// 通过data指定绘图数据
data: [37, 56, 88, 124, 34, 11, 90, 80, 56, 88, 124, 56, 88, 124],
// 调整柱子宽度
barWidth: '60%'
}
],
grid: {
// 布局
top: 0,
bottom: 0,
right: 0,
left: 0
}
})
}
Y轴出发合并的柱状图
mounted () {
const chartDom = document.getElementById('total-users-charts')
const chart = this.$echarts.init(chartDom)
chart.setOption({
xAxis: {
type: 'value', // 为了让柱状图从y轴出发
show: false
},
yAxis: {
type: 'category', // 为了让柱状图从y轴出发
show: false
},
// 要两组数据
series: [{
type: 'bar',
data: [19],
barWidth: 10,
stack: '总量', // stack属性可以把有关连的数据合并
// 通过itemStyle定义对应柱子的颜色
itemStyle: {
color: '#45c946'
}
}, {
type: 'bar',
data: [30],
stack: '总量',
itemStyle: {
color: '#eee'
}
}],
grid: {
// 布局
top: 0,
bottom: 0,
right: 0,
left: 0
}
})
}
自定义系列加入svg图标
mounted () {
const chartDom = document.getElementById('total-users-charts')
const chart = this.$echarts.init(chartDom)
chart.setOption({
xAxis: {
type: 'value', // 为了让柱状图从y轴出发
show: false
},
yAxis: {
type: 'category', // 为了让柱状图从y轴出发
show: false
},
// 要两组数据
series: [
{
type: 'bar',
data: [19],
barWidth: 10,
stack: '总量', // stack属性可以把有关连的数据合并
// 通过itemStyle定义对应柱子的颜色
itemStyle: {
color: '#45c946'
}
},
{
type: 'bar',
data: [30],
stack: '总量',
itemStyle: {
color: '#eee'
}
},
{
// 自定义图标系列，数据和左边那条柱子一致，也用stack合并
type: 'custom',
stack: '总量',
data: [19],
renderItem: (params, api) => {
// params是图标有关的信息，api提供了很多方法
const value = api.value(0) // value是data中的第一个元素
console.log(value)
const endPoint = api.coord([value, 0]) // x轴传入19，Y轴传入0 api.coord计算坐标
// endPoint就是坐标
return {
type: 'group', // 可以加个children变成一组图形
children: [
{
// renderItem的返回值里面就是要绘制的图形
type: 'path',
position: endPoint, // 绘图的坐标
shape: {
d: 'M499.904 270.912l-342.912 395.584a16 16 0 0 0 12.032 26.496H855.04a16 16 0 0 0 12.032-26.496l-342.912-395.52a16 16 0 0 0-24.192 0z', // svg图标
x: -5,
y: 5, // x轴y轴的相对偏移量
width: 10,
height: 10,
layout: 'cover',
itemStyle: {
normal: {
color: '#1890ff'
}
}
}
},
{
// renderItem的返回值里面就是要绘制的图形
type: 'path', // 线段
position: endPoint, // 绘图的坐标
shape: {
d: 'M889.696 320.8H158.848l365.504 365.536 365.344-365.536z', // svg图标
x: -5,
y: -15, // x轴y轴的相对偏移量
width: 10,
height: 10,
layout: 'cover', // 伸展开来
style: {
fill: '#45c946' // 这个颜色不知道为啥没设置成功
}
}
}
]
}
}
}
],
grid: {
// 布局
top: 0,
bottom: 0,
right: 0,
left: 0
}
})
}
水球图
首先echarts官网-文档-API-series里面的type是找不到水球图的，
可以在echarts官网-下载-扩展下载找到水球图。
下载包
npm install echarts-liquidfill -S
在需要用的组件内引入
import 'echarts-liquidfill'
然后可以配置使用：
<template>
<div id="liquidfill"></div>
</template>
<script>
import 'echarts-liquidfill'
export default {
mounted () {
const chartDom = document.getElementById('liquidfill')
const chart = this.$echarts.init(chartDom) // 到此步完成echarts的初始化
chart.setOption({
series: [
{
type: 'liquidFill',
data: [0.6]
}
]
})
}
}
</script>
//最后设置宽高就有了一个水球图
<style lang="scss" scoped>
#liquidfill {
width: 300px;
height: 300px;
}
</style>
