vue2.x+echarts封装的折线图和柱状图组件

组件charts.vue

<template><div :style="chartStyle" ref="chart"></div></template><script>import echarts from 'echarts'export default {name: 'EChart',props: {options: {type: Object,default: () => ({})},chartStyle: {type: Object,default: () => ({height: '400px',width: '100%'})},xAxis: {type: Object,default: () => ({type: 'category',boundaryGap: false,data: []})},yAxis: {type: Object,default: () => ({type: 'value'})},series: {type: Array,default: () => []},grid: {type: Object,default: () => ({})},legend: {type: Object,default: () => ({})},tooltip: {type: Object,default: () => ({})},lineColors: {type: Array,default: () => ['#00BAFF', '#3DE7C9', '#CCEDF0', '#FFB71C', '#FF5A5A']},barColors: {type: Array,default: () => ['#00BAFF', '#3DE7C9', '#CCEDF0', '#FFB71C', '#FF5A5A']},showLoading: {type: Boolean,default: false},loadingOption: {type: Object,default: () => ({text: '数据加载中...',color: '#00BAFF',textColor: '#000',maskColor: 'rgba(255, 255, 255, 0.8)',zlevel: 0})}},data() {return {chartInstance: null}},watch: {options() {this.renderChart()},xAxis() {this.renderChart()},yAxis() {this.renderChart()},series() {this.renderChart()},grid() {this.renderChart()},legend() {this.renderChart()},tooltip() {this.renderChart()},lineColors() {this.renderChart()},barColors() {this.renderChart()},showLoading() {if (this.showLoading) {this.chartInstance.showLoading('default', this.loadingOption)} else {this.chartInstance.hideLoading()}}},mounted() {this.chartInstance = echarts.init(this.$refs.chart)if (this.showLoading) {this.chartInstance.showLoading('default', this.loadingOption)}this.renderChart()},beforeDestroy() {this.dispose()},methods: {renderChart() {const option = {backgroundColor: this.options.backgroundColor || '#fff',xAxis: this.xAxis,yAxis: this.yAxis,series: this.series,grid: this.grid,legend: this.legend,tooltip: this.tooltip}// 根据传入的数据和配置参数生成图表this.generateChart(option)},generateChart(option) {// 配置折线图和柱状图的样式if (option.series && option.series.length > 0) {option.series.forEach((s, index) => {if (s.type === 'line') {s.itemStyle = {color: this.lineColors[index] || this.lineColors[0]}s.lineStyle = {color: this.lineColors[index] || this.lineColors[0]}} else if (s.type === 'bar') {s.itemStyle = {color: this.barColors[index] || this.barColors[0]}}})}// 渲染图表this.chartInstance.setOption(option)},dispose() {if (this.chartInstance) {this.chartInstance.dispose()this.chartInstance = null}}}
}
</script><style scoped>
/* 在这里可以写样式，比如设置图表容器的宽度和高度 */
</style>

这个组件支持以下传入参数：

• options：图表的配置参数，格式为一个对象，具体格式参考 ECharts 官方文档；
• chartStyle：图表容器的样式，比如设置宽度、高度等；
• xAxis：X 轴的配置参数，格式为一个对象，具体格式参考 ECharts 官方文档；
• yAxis：Y 轴的配置参数，格式为一个对象，具体格式参考 ECharts 官方文档；
• series：图表系列的配置参数，格式为数组，每个元素为一个对象，具体格式参考 ECharts 官方文档；
• grid：图表的网格配置参数，格式为一个对象，具体格式参考 ECharts 官方文档；
• legend：图例的配置参数，格式为一个对象，具体格式参考 ECharts 官方文档；
• tooltip：提示框的配置参数，格式为一个对象，具体格式参考 ECharts 官方文档；
• lineColors：折线图的颜色数组，格式为一个数组，每个元素为一个颜色值；
• barColors：柱状图的颜色数组，格式为一个数组，每个元素为一个颜色值；
• showLoading：是否显示数据加载动画；
• loadingOption：数据加载动画的配置参数，格式为一个对象，具体格式参考 ECharts 官方文档。

使用示例

<template><chartsref="chart":data="chartData":options="chartOptions":xAxis="xAxis":yAxis="yAxis":series="chartSeries":grid="grid":legend="legend":tooltip="tooltip":lineColors="lineColors":barColors="barColors":showLoading="showLoading":loadingOption="loadingOption"/>
</template><script>
import charts from "@/components/charts"
export default {name: 'MyChart',components: {charts},data() {return {chartData: [{ name: 'A', value: 100 },{ name: 'B', value: 200 },{ name: 'C', value: 150 },{ name: 'D', value: 300 },{ name: 'E', value: 180 }],chartOptions: {title: {text: '示例图表',left: 'center'}},xAxis: {type: 'category',data: ['A', 'B', 'C', 'D', 'E']},yAxis: {type: 'value'},chartSeries: [{type: 'line',name: '数据一',data: [100, 200, 150, 300, 180]}],grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},legend: {data: ['数据一']},tooltip: {trigger: 'axis'},lineColors: ['#009688'],barColors: ['#009688'],showLoading: true,loadingOption: {text: '加载中...',color: '#009688'},chartStyle: {width: '100%',height: '400px' // 设置图表容器的高度}}}
}
</script>

如果有需求，您可以根据自己的需求进一步定制和扩展。