Using Echart in Vue2

Using Echart in Vue2

1. Demo effect

1.2 install echarts

$npm install echarts --save

1.3 install vue echarts

Echarts official package specially made for vue

$npm install vue-echarts --save

1.4 Introduced in mian.js

import 'echarts'

import Echarts from 'vue-echarts'

import 'echarts/theme/shine'//引入echart 主题(多种主题可使用)

import 'echarts/theme/cool'

const app = createApp(App)

app.component('v-chart', Echarts)

app.mount('#app')

1.5 used in components

demo. vue

<template>

 <v-chart autoresize theme="shine" :option="option_column" style="height: 400px;width:600px;"></v-chart>

</template>

<script>

import LineOption from './options/echart-line.ts'

export default {

 name:'EchartLine',

 data() {

  return {

   option_column: LineOption

  };

 },

};

</script>

echart-line.ts

const LineOption = {

 xAxis: {

  type: 'category',

  data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']

 },

 yAxis: {

  type: 'value'

 },

 series: [

  {

   data: [820, 932, 901, 934, 1290, 1330, 1320],//数据

   type: 'line',//图表类型

   smooth: false,//是否

  }

 ]

};

export default LineOption;

1.6 Other properties

Option defines the chart data, chart type and other properties of the chart.

When viewing the demo on the official website, just replace the option of the demo directly, and other effects need further study.