Echarts可视化教程

  1. 网站首页
  2. 百度ECharts
  3. ECharts实例
  4. ECharts入门
  5. 地图大全
  6. ECharts官网

Vue如何利用echarts来绘制折线图

<template>
  <div class="chart-container">
    <div ref="chart" class="chart"></div>
  </div>
</template>

<script>
import echarts from 'echarts';

export default {
  data() {
    return {
      chartData: [], // 存储统计数据
    };
  },
  mounted() {
    // 在组件挂载之后初始化图表
    this.initChart();
  },
  methods: {
    initChart() {
	  const chart = echarts.init(this.$refs.chart);
	   
	  const option = {
		title: {
		  text: '销售额变化趋势',
		},
		xAxis: {
		  type: 'category',
		  data: this.chartData.map(item => item.time),
		},
		yAxis: {
		  type: 'value',
		},
		series: [{
		  type: 'line',
		  data: this.chartData.map(item => item.amount),
		}],
	  };
	   
	  chart.setOption(option);
	},
  },
};
</script>
点击展开全文

相关文章

  1. Vue框架下如何实现动态生成统计图表?
  2. 如何在Vue的框架下画出数据库的统计图表?
  3. Vue如何利用echarts来绘制多维度统计图表
  4. Vue如何利用echarts来绘制柱状图
  5. Vue如何利用echarts来绘制图表

热门workflows工作流