效果如下
安装
npm install echarts
在所需要的页面中引入
<template>
<view class="chart-container" id="charts"></view>
</template>
<script>
import * as echarts from 'echarts' // 引入ECharts库
export default {
name: "echarts",
data() {
return {
chart: null,
};
},
props: {
// chart类型 line折线图 bar柱状图 Pie饼状图
chartType: {
type: String,
default: () => {
return 'line'
}
}
},
watch: {
chartType: {
handler(newVal, oldVal) {
this.$nextTick(() => {
if (newVal === 'line') {
this.initChartLine()
} else if (newVal === 'bar') {
this.initChartBar()
} else if (newVal === 'pie') {
this.initChartPie()
}
})
},
deep: true,
immediate: true,
}
},
mounted() {},
methods: {
// 折线图
initChartLine() {
this.chart = echarts.init(document.getElementById('charts'))
const option = {
title: {
show: false,
},
tooltip: {
trigger: 'axis',
// 可以在这里添加更多 tooltip 配置
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
grid: {
left: '10%', // 距离左边的距离
right: '10%', // 距离右边的距离
top: '17%', // 距离顶部的距离
bottom: '22%' // 距离底部的距离
},
xAxis: {
type: 'category', // x轴类型为类目轴
boundaryGap: false, // 取消x轴两端空白
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'], // x轴类目数据
axisTick: {
show: false, // 不显示刻度
},
axisLabel: { //x轴文字的配置
color: "#777", //Y轴内容文字颜色
interval: 'auto', // 可以设置为具体的数字，如 5，表示显示每隔 5 个标签
},
axisLine: {
lineStyle: {
color: '#E0E7FF' // x轴线的颜色
}
},
splitLine: {
// 纵向分割线
show: true,
lineStyle: {
color: '#032B50'
}
}
},
yAxis: {
type: 'value', // y轴类型为数值轴
name: '单位：斤/元', //单位
nameLocation: 'end', // (单位个也就是在在Y轴的最顶部)
//单位的样式设置
nameTextStyle: {
color: "#999", //颜色
padding: [0, 20, 0, 40], //间距分别是 上 右 下 左
fontSize: 14,
},
axisLabel: { //y轴文字的配置
color: "#777", //Y轴内容文字颜色
},
axisLine: { //y轴线的配置
show: true, //是否展示
lineStyle: {
color: "#E0E7FF", //y轴线的颜色（若只设置了y轴线的颜色，未设置y轴文字的颜色，则y轴文字会默认跟设置的y轴线颜色一致）
width: 1, //y轴线的宽度
//type: "solid" //y轴线为实线
},
},
axisTick: {
show: false // y轴上的小横线
},
// 横向分割线
splitLine: {
show: true, // 显示分割线。
lineStyle: {
// 分割线样式。
color: '#D2DAE3', // 分割线颜色。
type: 'dotted' // 分割线类型。 solid实线 dotted点型虚线 dashed线性虚线
}
},
splitNumber: 4, // 指定横向分割线的数量
},
// 图例
legend: {
data: ['近7天价格变化'],
left: 'center',
top: 'bottom'
},
series: [{
/*
// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，
// 相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，
// 则该四个值是绝对的像素位置
*/
type: 'line', // 图表类型为折线图
name: '近7天价格变化',
data: [120, 180, 150, 80, 70, 110, 130], // 折线图数据
smooth: true, // 平滑曲线
// 区域颜色渐变
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
[{
offset: 0,
color: "rgba(254, 235, 215, 1)",
},
{
offset: 1,
color: "rgba(254, 235, 215, 0)",
},
], false
),
},
// 折线颜色
lineStyle: {
// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
// color: {
// type: 'linear',
// x: 0,
// y: 0,
// x2: 0,
// y2: 1,
// colorStops: [{
// offset: 0, color: 'red' // 0% 处的颜色
// }, {
// offset: 1, color: 'blue' // 100% 处的颜色
// }],
// global: false // 缺省为 false
// }
color: "#FCA000",
width: 2,
},
color: "#FCA000", //拐点颜色
// symbol: 'circle', // 设置拐点形状、
// symbolSize: 4, // 设置拐点大小
// 拐点处显示值
itemStyle : {
normal: {
label : {show: true}
}
},
}],
}
this.chart.setOption(option)
},
// 柱状图
initChartBar() {
this.chart = echarts.init(document.getElementById('charts'))
const option = {
title: {
text: '柱状图示例' // 标题文本
},
xAxis: {
type: 'category', // x轴类型为类目轴
data: ['项目1', '项目2', '项目3', '项目4'] // x轴类目数据
},
yAxis: {
type: 'value' // y轴类型为数值轴
},
series: [{
type: 'bar', // 图表类型为柱状图
data: [120, 200, 150, 80] // 柱状图数据
}]
}
this.chart.setOption(option) // 将配置应用到图表实例
},
// 饼状图
initChartPie() {
const chartContainer = this.$refs.chartContainer
const option = {
title: {
text: '饼图示例'
},
series: [{
type: 'pie', // 图表类型为饼图
data: [{
value: 335,
name: '项目1'
}, // 饼图数据
{
value: 310,
name: '项目2'
},
{
value: 234,
name: '项目3'
},
{
value: 135,
name: '项目4'
},
{
value: 1548,
name: '项目5'
}
]
}]
}
this.chart.setOption(option)
}
}
}
</script>
<style scoped lang="scss">
.chart-container {
width: 100%;
height: 100%;
}
</style>
在页面中使用
<template>
<my-echart />
</template>
<script>
import myEchart from '../../components/echarts/echarts.vue'
export default {
data() {
return {
}
},
components: {
'my-echart': myEchart
},
}
</script>
