Introduction to Vue 2 and Echarts Integration

This guide demonstrates how to integrate Echarts with Vue 2 to create dynamic data visualizations. Echarts is a powerful, open-source JavaScript charting library that can be seamlessly integrated into Vue applications.

Basic Chart Implementation

<template>
  <div>
    <div>Sample Chart Container</div>
    <div ref="chartContainer" class="chart-area"></div>
  </div>
</template>

<script>
import * as charts from "echarts";

export default {
  name: "ChartDemo",
  data() {
    return {};
  },
  mounted() {
    const chartInstance = charts.init(this.$refs.chartContainer);
    chartInstance.setOption({
      title: {
        text: "Data Visualization",
      },
      xAxis: {
        data: ["Item A", "Item B", "Item C", "Item D"],
      },
      yAxis: {},
      series: {
        name: "Sample Dataset",
        type: "bar",
        data: [6300, 4800, 3200, 600]
      },
    });
  },
  methods: {},
};
</script>

<style scoped>
.chart-area {
  width: 500px;
  height: 500px;
  background-color: #f8f9fa;
}
</style>

Enhanced Chart Styling

<template>
  <div>
    <div>Styled Chart Example</div>
    <div ref="styledChart" class="chart-container"></div>
  </div>
</template>

<script>
import * as charts from "echarts";

export default {
  name: "StyledChart",
  data() {
    return {};
  },
  mounted() {
    const styledChart = charts.init(this.$refs.styledChart);
    styledChart.setOption({
      title: {
        text: "Enhanced Visualization",
        backgroundColor: "#ffebee",
        borderColor: "#f44336",
        borderWidth: 5,
        x: "center",
        subtext: "Custom Styling Example"
      },
      xAxis: {
        data: ["Alpha", "Beta", "Gamma", "Delta"],
      },
      yAxis: {},
      series: {
        name: "Data Points",
        type: "bar",
        data: [6300, 4800, 3200, 600]
      },
    });
  },
  methods: {},
};
</script>

<style scoped>
.chart-container {
  width: 500px;
  height: 500px;
  background-color: #ffebee;
}
</style>

Interactive Tooltips

<template>
  <div>
    <div>Interactive Chart with Tooltips</div>
    <div ref="interactiveChart" class="chart-wrapper"></div>
  </div>
</template>

<script>
import * as charts from "echarts";

export default {
  name: "InteractiveChart",
  data() {
    return {};
  },
  mounted() {
    const interactiveChart = charts.init(this.$refs.interactiveChart);
    interactiveChart.setOption({
      title: {
        text: "Interactive Data Display",
        backgroundColor: "#ffebee",
        borderColor: "#f44336",
        borderWidth: 5,
        x: "center",
        subtext: "Hover for details"
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
        backgroundColor: "#ffebee",
        borderColor: "#f44336",
        borderWidth: 5,
        textStyle: {
          color: "#ffeb3b",
        },
        formatter(params) {
          console.log(params);
          for (let i = 0; i < params.length; i++) {
            return (
              "Product: " +
              params[i].name +
              "--Value:" +
              params[i].data.value +
              "--Date:" +
              params[i].data.date
            );
          }
        },
      },
      xAxis: {
        data: ["Product 1", "Product 2", "Product 3", "Product 4"],
      },
      yAxis: {},
      series: {
        name: "Sales Data",
        type: "bar",
        data: [
          { value: "5", date: "2023-1-1" },
          { value: "6", date: "2023-1-1" },
          { value: "9", date: "2023-1-1" },
          { value: "7", date: "2023-1-1" },
        ],
      },
    });
  },
  methods: {},
};
</script>

<style scoped>
.chart-wrapper {
  width: 500px;
  height: 500px;
  background-color: #ffebee;
}
</style>

Chart Legends

<template>
  <div>
    <div>Chart with Legend</div>
    <div ref="legendChart" class="legend-chart"></div>
  </div>
</template>

<script>
import * as charts from "echarts";

export default {
  name: "LegendChart",
  data() {
    return {};
  },
  mounted() {
    const legendChart = charts.init(this.$refs.legendChart);
    legendChart.setOption({
      title: {
        text: "Dataset with Legend",
        backgroundColor: "#ffebee",
        borderColor: "#f44336",
        borderWidth: 5,
        x: "center",
        subtext: "Legend Configuration"
      },
      legend:{
        show:true,
        top:"10%",
        itemWidth:10,
        itemHeight:20
      },
      xAxis: {
        data: ["Category A", "Category B", "Category C", "Category D"],
      },
      yAxis: {},
      series: {
        name: "Data Values",
        type: "bar",
        data: [6300, 4800, 3200, 600]
      },
    });
  },
  methods: {},
};
</script>

<style scoped>
.legend-chart {
  width: 500px;
  height: 500px;
  background-color: #ffebee;
}
</style>