Vue进行数据可视化图表展示的实现示例

npm install echarts --save

<template>
  <div id="chart" style="height: 300px;"></div>
</template>
<script>
import echarts from 'echarts'
export default {
  mounted() {
    const chartDom = document.getElementById('chart')
    const myChart = echarts.init(chartDom)
    const option = {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        data: [150, 230, 224, 218, 135, 147, 260],
        type: 'line'
      }]
    }
    myChart.setOption(option)
  }
}
</script>

<template>
  <div id="chart" style="height: 400px;"></div>
</template>
<script>
import echarts from 'echarts'
export default {
  mounted() {
    const chartDom = document.getElementById('chart')
    const myChart = echarts.init(chartDom)
    const option = {
      title: {
        text: '在线商城销售数据'
      },
      xAxis: {
        type: 'category',
        data: ['01/01', '01/02', '01/03', '01/04', '01/05', '01/06', '01/07']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '销售额',
          data: [120, 200, 150, 80, 70, 90, 180],
          type: 'bar'
        },
        {
          name: '订单量',
          data: [20, 35, 30, 15, 10, 18, 25],
          type: 'line'
        }
      ]
    }
    myChart.setOption(option)
  }
}
</script>

npm install d3 --save

<template>
  <div id="chart" style="height: 300px;"></div>
</template>
<script>
import * as d3 from 'd3'
export default {
  mounted() {
    const chartDom = d3.select("#chart")
    const data = [10, 20, 30, 40, 50]
    const xScale = d3.scaleBand()
      .domain(data.map((d, i) => i))
      .range([0, 200])
      .padding(0.1)
    const yScale = d3.scaleLinear()
      .domain([0, d3.max(data)])
      .range([0, 200])
    chartDom.selectAll("rect")
      .data(data)
      .enter()
      .append("rect")
      .attr("x", (d, i) => xScale(i))
      .attr("y", (d) => 200 - yScale(d))
      .attr("width", xScale.bandwidth())
      .attr("height", (d) => yScale(d))
  }
}
</script>

<template>
  <div id="chart" style="height: 400px;"></div>
</template>
<script>
import * as d3 from 'd3'
import { fetchWeatherData } from './api'
export default {
  async mounted() {
    const chartDom = d3.select("#chart")
    const data = await fetchWeatherData()
    const margin = { top: 20, right: 20, bottom: 30, left: 50 }
    const width = 600 - margin.left - margin.right
    const height = 400 - margin.top - margin.bottom
    const svg = chartDom.append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
    const g = svg.append("g")
      .attr("transform", `translate(${margin.left}, ${margin.top})`)
    const x = d3.scaleTime()
      .domain(d3.extent(data, d => new Date(d.date)))
      .range([0, width])
    const y = d3.scaleLinear()
      .domain([d3.min(data, d => d.min), d3.max(data, d => d.max)])
      .range([height, 0])
    const line = d3.line()
      .x(d => x(new Date(d.date)))
      .y(d => y(d.avg))
    g.append("g")
      .attr("transform", `translate(0, ${height})`)
      .call(d3.axisBottom(x))
    g.append("g")
      .call(d3.axisLeft(y))
    g.append("path")
      .datum(data)
      .attr("fill", "none")
      .attr("stroke", "steelblue")
      .attr("stroke-width", 2)
      .attr("d", line)
  }
}
</script>