效果图
背景图片
下载ECharts
npm install echarts --save
引入并注册全局ECharts
在 main.js 文件里引入并注册 ( 这里是 Vue3.0 的模板 )
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
在组件中使用ECharts
<template>
<div class='wrapper'>
<div class='chart' id='chart'></div>
</div>
</template>
<script>
export default {
data () {
return {}
},
mounted () {
this.drawChart()
},
methods: {
drawChart () {
// 基于准备好的dom,初始化echarts实例
const chart = this.$echarts.init(document.getElementById('chart'))
// 监听屏幕变化自动缩放图表
window.addEventListener('resize', function () { chart.resize() })
// 绘制图表
chart.setOption({
// 设置图表的位置
grid: {
x: 40, // 左间距
y: 70, // 上间距
x2: 50, // 右间距
y2: 30, // 下间距
containLabel: true // grid 区域是否包含坐标轴的刻度标签, 常用于『防止标签溢出』的场景
},
// dataZoom 组件 用于区域缩放
dataZoom: [
{
type: 'inside',
xAxisIndex: [0], // 设置 dataZoom-inside 组件控制的 x轴
// 数据窗口范围的起始和结束百分比 范围: 0 ~ 100
start: 0,
end: 100
}
],
// 图表主标题
title: {
text: '订单', // 主标题文本,支持使用 \n 换行
top: 10, // 定位 值: 'top', 'middle', 'bottom' 也可以是具体的值或者百分比
left: 'center', // 值: 'left', 'center', 'right' 同上
textStyle: { // 文本样式
fontSize: 24,
fontWeight: 600,
color: '#fff'
}
},
// 设置自定义文字
graphic: [
{
type: 'text', // 图形元素类型
left: 70, // 进行定位
bottom: 32,
style: { // 文本样式
fill: '#cdd3ee',
text: '(月份)',
font: 'normal 13px Microsoft' // style | weight | size | family
}
}
],
// 提示框组件
tooltip: {
trigger: 'axis', // 触发类型, axis: 坐标轴触发
axisPointer: {
type: 'line' // 指示器类型
},
textStyle: {
color: '#d5dbff' // 文字颜色
},
// 提示框浮层内容格式器,支持字符串模板和回调函数两种形式
// 折线(区域)图、柱状(条形)图、K线图 : {a}(系列名称),{b}(类目值),{c}(数值), {d}(无)
formatter: '{b}<br />{a0}: {c0}万'
},
// 图例组件
legend: {
// 图例的数据数组
data: ['订单'],
icon: 'roundRect', // 图例项的 icon 值: 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
top: 13, // 定位
right: 30,
textStyle: { // 文本样式
fontSize: 16,
color: '#cdd3ee'
}
},
// X轴
xAxis: {
show: true, // 不设置默认值为 true
type: 'category', // 坐标轴类型, 'category' 类目轴,适用于离散的类目数据,为该类型时必须通过 data 设置类目数据
// 坐标轴轴线
axisLine: {
lineStyle: {
type: 'solid', // 坐标轴线线的类型 'solid', 'dashed', 'dotted'
width: 1, // 坐标轴线线宽, 不设置默认值为 1
color: '#204756' // 坐标轴线线的颜色
}
},
// 坐标轴刻度
axisTick: {
show: false
},
// 分隔线
splitLine: {
show: false
},
// 坐标轴刻度标签
axisLabel: {
fontSize: 16, // 文字的字体大小
color: '#cdd3ee', // 刻度标签文字的颜色
// 使用函数模板 传入的数据值 -> value: number|Array,
formatter: function (value) {
return value.replace(/[\u4e00-\u9fa5]/g, '')
}
},
// 类目数据,在类目轴(type: 'category')中有效
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
},
// 左侧Y轴
yAxis: [
{
type: 'value', // 坐标轴类型, 'value' 数值轴,适用于连续数据
name: '(万)', // 坐标轴名称
nameLocation: 'end', // 坐标轴名称显示位置 'start', 'middle' 或者 'center', 'end'
nameTextStyle: { // 坐标轴名称的文字样式
color: '#cdd3ee',
fontSize: 16
},
nameGap: 13, // 坐标轴名称与轴线之间的距离
// 坐标轴刻度
axisTick: {
show: true // 是否显示坐标轴刻度 默认显示
},
// 坐标轴轴线
axisLine: { // 是否显示坐标轴轴线 默认显示
show: true, // 是否显示坐标轴轴线 默认显示
lineStyle: { // 坐标轴线线的颜色
color: '#204756'
}
},
// 坐标轴在 grid 区域中的分隔线
splitLine: {
show: true, // 是否显示分隔线,默认数值轴显示
lineStyle: {
color: '#204756', // 分隔线颜色
opacity: 0.5 // 分隔线透明度
}
},
// 坐标轴刻度标签
axisLabel: {
show: true, // 是否显示刻度标签 默认显示
fontSize: 16, // 文字的字体大小
color: '#cdd3ee', // 刻度标签文字的颜色
// 使用字符串模板,模板变量为刻度默认标签 {value}
formatter: '{value}'
}
}
],
// 系列列表
series: [
// 柱状图顶部的圆片
{
name: "订单", // 系列名称, 用于tooltip的显示, legend 的图例筛选
type: "pictorialBar", // 系列类型
symbolSize: [20, 10], // 标记的大小
symbolOffset: [0, -5], // 标记相对于原本位置的偏移
symbolPosition: "end", // 图形的定位位置。可取值:start、end、center
// 图例的图形样式
itemStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: '#92e5c9' // 0% 处的颜色
}, {
offset: 1,
color: '#6effc4' // 100% 处的颜色
}]
}
},
z: 10, // 组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖
data: [200, 330, 400, 600, 830, 650, 690, 430, 550, 420, 420, 320] // 系列中的数据内容数组
},
// 柱状图
{
name: '订单', // 系列名称, 用于tooltip的显示, legend 的图例筛选
type: 'bar', // 系列类型
barWidth: 20, // 指定柱宽度,可以使用绝对数值或百分比,默认自适应
barGap: '-100%', // 不同系列的柱间距离l,如果想要两个系列的柱子重叠,可以设置 barGap 为 '-100%'。这在用柱子做背景的时候有用
// 图例的图形样式
itemStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: '#07c678' // 0% 处的颜色
}, {
offset: 1,
color: '#11ddd4' // 100% 处的颜色
}]
}
},
data: [200, 330, 400, 600, 830, 650, 690, 430, 550, 420, 420, 320] // 系列中的数据内容数组
},
// 柱状图底下的圆片
{
name: "订单",
type: "pictorialBar", // 系列类型
symbolSize: [20, 12], // 标记的大小
symbolOffset: [0, 5], // 标记相对于原本位置的偏移
// 图例的图形样式
itemStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: '#08d3bf' // 0% 处的颜色
}, {
offset: 1,
color: '#11ddd4' // 100% 处的颜色
}]
}
},
z: 10, // 组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖
data: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1] // 系列中的数据内容数组
},
// 背景顶部的圆片
{
name: "订单", // 系列名称, 用于tooltip的显示, legend 的图例筛选
type: "pictorialBar", // 系列类型
symbolSize: [20, 10], // 标记的大小
symbolOffset: [0, -5], // 标记相对于原本位置的偏移
symbolPosition: "end", // 图形的定位位置。可取值:start、end、center
// 图例的图形样式
itemStyle: {
color: '#457373',
opacity: 1,
},
z: 10, // 组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖
data: [1000, 1000, 1000, 1000, 1000, 1000, 1000, 1000, 1000, 1000, 1000, 1000, 1000] // 系列中的数据内容数组
},
// 背景
{
name: '订单', // 系列名称, 用于tooltip的显示, legend 的图例筛选
type: 'bar', // 系列类型
barWidth: 20, // 指定柱宽度,可以使用绝对数值或百分比,默认自适应
barGap: '-100%', // 不同系列的柱间距离l,如果想要两个系列的柱子重叠,可以设置 barGap 为 '-100%'。这在用柱子做背景的时候有用
// 图例的图形样式
itemStyle: {
color: '#0a423f',
opacity: .7,
},
z: 0, // 组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖
data: [1000, 1000, 1000, 1000, 1000, 1000, 1000, 1000, 1000, 1000, 1000, 1000, 1000] // 系列中的数据内容数组
}
]
})
}
}
}
</script>
<style scoped>
.wrapper {
width: 100%;
}
.wrapper .chart {
width: 60%;
height: 400px;
margin: 100px auto 0;
background: url(../../public/static/bg.png) no-repeat;
background-size: 100% 100%;
}
</style>