1. vue按需引入折线图
/**
* echarts版本 5.3.2
* main.js
*/
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core'
// 引入折线图图表，图表后缀都为 Chart
import { LineChart } from 'echarts/charts'
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
TitleComponent,
TooltipComponent,
GridComponent,
DatasetComponent,
TransformComponent,
LegendComponent,
DataZoomComponent
} from 'echarts/components';
// 标签自动布局，全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features'
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers'
// 注册必须的组件
echarts.use([
TitleComponent,
TooltipComponent,
GridComponent,
DatasetComponent,
TransformComponent,
LegendComponent,
DataZoomComponent,
LineChart,
LabelLayout,
UniversalTransition,
CanvasRenderer
])
Vue.prototype.$echarts = echarts
2. 移动端折线图
2.1 代码
<template>
<div class="line-echart-container">
<div ref="lineEchart"></div>
</div>
</template>
<script>
export default {
name: 'LineEchart',
data() {
return {
}
},
methods: {
initOption() {
return {
title: {
text: '标题',
top: 'bottom',
left: 'center',
textStyle: {
fontSize: '12px',
color: 'rgba(177, 177, 177, 1)',
}
},
grid: {
top: 0,
bottom: '25%'
},
xAxis: {
show: false,
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
show: false,
min: 'dataMin', // 取数据在该轴上的最小值作为最小刻度
max: 'dataMax',
type: 'value'
},
series: [
{
type: 'line',
symbol: 'none', //去掉折线图中的节点
areaStyle: { // 区域填充样式
color: 'rgba(255, 234, 234, 1)'
},
lineStyle: {
color: 'rgba(255, 36, 66, 1)',
width: 1,
},
data: [150, 230, 224, 218, 135, 147, 260]
}
]
}
}
},
mounted () {
const myChart = this.$echarts.init(this.$refs.lineEchart)
myChart.setOption(this.initOption())
window.onresize = function() {
myChart.resize()
}
}
}
</script>
<style scoped lang="scss">
.line-echart-container {
> div {
width: 80px;
height: 70px;
}
}
</style>
2.2. 效果图
3. 双折线图
3.1 代码
<template>
<div class="line-echart-container">
<div ref="lineEchart"></div>
</div>
</template>
<script>
import echartsHandIcon from '@/assets/slider.svg'
export default {
name: 'LineEchart',
data() {
return {
}
},
created() {
this.$nextTick(() => {
const myChart = this.$echarts.init(this.$refs.lineEchart)
myChart.setOption(this.initOption())
window.onresize = () => {
myChart.resize()
}
})
},
methods: {
initOption() {
const y1Data = [100, 280, 350, 460, 880, 300, 400, 160, 330, 770]
return {
title: {
subtext: '单位：万元',
top: 0,
left: 10,
subtextStyle: {
fontFamily: 'MicrosoftYaHei',
color: '#8C8C8C'
}
},
dataZoom: [{
type: 'slider',
bottom: 6,
height: 12,
handleIcon: `image://${echartsHandIcon}`,
handleSize: 24,
fillerColor: 'rgba(245, 245, 245, .7)', // 选中范围的填充颜色
borderColor: '#f5f5f5', // 边框颜色
dataBackground: { // 数据阴影的样式
areaStyle: { // 阴影的填充样式
color: '#E6E6E6',
shadowColor: '#E6E6E6'
}
},
textStyle: {
color: '#939FAE'
}
}],
tooltip: {
trigger: 'axis',
padding: [0, 8, 4],
axisPointer: {
lineStyle: {
color: '#e5e5e599'
}
},
textStyle: {
fontFamily: 'MicrosoftYaHei',
color: '#8C8C8C',
fontSize: 10,
lineHeight: 20
}
},
legend: {
top: 10,
right: 0,
icon: 'circle',
itemWidth: 6,
itemHeight: 6,
textStyle: {
fontFamily: 'MicrosoftYaHei',
color: '#8c8c8c'
},
},
grid: {
left: 16,
right: 16,
top: 50,
bottom: 20,
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false, // 坐标轴两边留白策略
axisLabel: {
color: '#8C8C8C'
},
axisLine: {
onZero: false, // 有负数时，轴线是否在0刻度线上
lineStyle: {
color: '#E5E5E5'
}
},
axisTick: {
show: false
},
data: ['01/01','01/02','01/03','01/04','01/05','01/06','01/07','01/08','01/09','01/10']
},
yAxis: [
{
type: 'value',
min: 0,
max: Math.ceil(Math.max.apply(null, y1Data) / 5) * 5,
interval: Math.ceil(Math.max.apply(null, y1Data) / 5),
axisLine: {
show: false
},
axisLabel: {
color: '#8C8C8C'
},
splitLine: { // 分隔线样式
lineStyle: {
color: ['#e5e5e599']
}
}
},
{
type: 'value',
min: 0,
max: 100,
axisLine: {
show: false
},
axisLabel: {
color: '#8C8C8C',
formatter: '{value}%'
},
axisTick: {
show: false
},
splitLine: {
lineStyle: {
color: ['#e5e5e599']
}
}
}
],
series: [
{
name: '金额',
type: 'line',
showSymbol: false,
symbol: 'circle', // 标记的图形
symbolSize: 2,
lineStyle: {
width: 1,
color: '#1136F5'
},
data: y1Data
},
{
name: '比率',
type: 'line',
yAxisIndex: 1,
showSymbol: false,
symbol: 'circle',
symbolSize: 2,
lineStyle: {
width: 1,
color: '#00A870'
},
data: [0, 10, 20, 40, 80, 15, 30, 25, 35, 40]
}
]
}
}
}
}
</script>
<style scoped lang="scss">
.line-echart-container {
> div {
width: 300px;
height: 240px;
margin: auto;
}
}
</style>
3.2 效果图
