Project scenario:

Use Echarts to visualize charts in vue, the official website is as follows

Install and use:

① Obtain from npm

npm install echarts --save

② New echarts.js

Note: The path of echarts.js is stored according to your own habits

(Advantage: save project memory, Disadvantage: more troublesome, you need to be familiar with each component)

//按需引入echarts，在echarts.js里
import * as echarts from 'echarts'

// 引入柱状图图表和折线图表、饼图表、散点图，图表后缀都为 Chart
import { BarChart ，  LineChart, PieChart, ScatterChart} from 'echarts/charts';
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent
} from 'echarts/components';
// 标签自动布局，全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers';

// 注册必须的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  BarChart,
  LineChart,
  PieChart,
  ScatterChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer
]);


// 导出
export default echarts

echarts.js [global import]:

1) The introduction in main.js is the global introduction of the performance-saving version

// main.js
import echarts from './js/echarts'
Vue.prototype.$echarts = echarts //原型链挂载到全局

2) Complete code of single page file

Be sure to set the height for the container ! Otherwise the chart will not come out!

<template>
<div id="chart" style="height: 400px" ref="chart"></div>
</template>

<script>
  export default {
    data() {
      chart: null // echarts图表实例
    },
 
    methods: {
    initChart () {
 
      this.chart = this.$echarts.init(this.$refs.chart)
   
      this.chart.setOption({
        title: {
         text: 'Echarts大标题',
         subtext: 'Echarts副标题'
     },
       xAxis: {
         type: 'category',
         data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
     },
       yAxis: {
         type: 'value'
     },
       series: [
          {
            name: '销量',
            type: 'bar', // 柱状图
            data: [5, 20, 36, 10, 10, 20]
          },
          {
            name: '利润',
            smooth: true,
            type: 'line', // 折线图
            data: [2, 23, 5, 54, 9, 33]
          }
        ]
 
      })
    },
},
 
   mounted () {
    this.initChart();//页面挂载echarts
  },
</script>

Renderings:

echarts.js [import on demand]:

1) Import directly on a single page

// 某个vue文件
import echarts from '../../js/echarts.js'

2) Complete code

Note: container set height

< template >
	<div id="chart" style="height: 400px" ref="chart"></div>
</ >

	<script>
  // 某个vue文件
		import echarts from '../../js/echarts.js'
		export default {
			data() {
			chart: null // echarts图表实例
    },

		methods: {
			initChart() {

			this.chart = this.$echarts.init(this.$refs.chart)
   
      this.chart.setOption({
			title: {
			text: 'echarts主标题'
  },
		tooltip: {
			trigger: 'axis',
		axisPointer: {
			type: 'cross',
		label: {
			backgroundColor: '#6a7985'
      }
    }
  },
		legend: {
			data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
  },
		toolbox: {
			feature: {
			saveAsImage: { }
    }
  },
		grid: {
			left: '3%',
		right: '4%',
		bottom: '3%',
		containLabel: true
  },
		xAxis: [
		{
			type: 'category',
		boundaryGap: false,
		data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    }
		],
		yAxis: [
		{
			type: 'value'
    }
		],
		series: [
		{
			data: [720, 600, 850, 780, 670, 1110, 630],
		type: 'bar',
		showBackground: true,
		backgroundStyle: {
			color: 'rgba(180, 180, 180, 0.2)'
      }
    },

		{
			name: 'Union Ads',
		type: 'line',
		stack: 'Total',
		areaStyle: { },
		emphasis: {
			focus: 'series'
      },
		data: [220, 182, 191, 234, 290, 330, 310]
    },


		{
			name: 'Search Engine',
		type: 'line',
		stack: 'Total',
		label: {
			show: true,
		position: 'top'
      },
		areaStyle: { },
		emphasis: {
			focus: 'series'
      },
		data: [220, 232, 201, 234, 290, 330, 320]
    },
		]
      })
    },
},

		mounted () {
			this.initChart()//页面挂载echarts
		},
	</script>