原生echart和vue-echart的使用詳解

npm install echarts --save

import * as echarts from 'echarts'//局部或全局定義Vue.prototype.$echarts = echarts

itemStyle: {
    // shadow size
    shadowBlur: 200,
    // horizontal offset of shadow
    shadowOffsetX: 0,
    // vertical offset of shadow
    shadowOffsetY: 0,
    // shadow color
    shadowColor: 'rgba(0, 0, 0, 0.5)'
}

	//div區域
	<div id="bar" style="width: 600px;height: 400px;"></div>
	//配置樣式
	methods: {
		barEcharts () {
      	  var myChart = this.$echarts.init(document.getElementById('bar'))
      	// 配置圖表
		  var option = {
			title: {
			  text: '標題'
			},
			//提示框
			tooltip: {},
			legend: {
			  data: ['']
			},
			//x軸顯示種類
			xAxis: {
			  data: ['種類一', '種類二', '種類三', '種類四', '種類五', '種類六']
			},
			//y軸可填數值等
			yAxis: {
			},
			series: [{
			  name: '銷量',
			  type: 'bar',
			  //y軸數值
			  data: [5,
				{
				  value: 20,
				  itemStyle: {
					color: '#FFB5C5'
				  }
				}, 36, 10, 10, 20]
				}]
		  }
		  myChart.setOption(option)
   	}
  }
//設置
 mounted () {
    this.barEcharts()
 }

//div
<div id="line" style="width: 600px;height: 400px;"></div>
	//option配置
   lineEcharts () {
      var myChart = this.$echarts.init(document.getElementById('line'))
      // 配置圖表
      var option = {
        title: {
          text: 'Stacked Line'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['Email', 'Union Ads']
        },
		//笛卡爾坐標系的底板
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
		//工具框
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
		//線一
          {
            name: 'Email',
            type: 'line',
            stack: 'Total',
            data: [120, 132, 101, 134, 90, 230, 210]
          },
		  //線二
          {
            name: 'Union Ads',
            type: 'line',
            stack: 'Total',
            data: [220, 182, 191, 234, 290, 330, 310]
          }
        ]
      }
      myChart.setOption(option)
    }
 //設置
 mounted () {
    this.lineEcharts()
 }

//div
<div id="pie" style="width: 600px;height: 400px;"></div>
	//option
    pieEcharts () {
      var myChart = this.$echarts.init(document.getElementById('pie'))
      // 配置圖表
      var option = {
        title: {
          text: 'Referer of a Website',
          subtext: 'Fake Data',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 1048, name: 'Search Engine' },
              { value: 735, name: 'Direct' },
              { value: 580, name: 'Email' },
              { value: 484, name: 'Union Ads' },
              { value: 300, name: 'Video Ads' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      myChart.setOption(option)
    }

	//vue 2 
	npm install echarts vue-echarts
	npm i -D @vue/composition-api
	//vue 3
	npm install echarts vue-echarts

//可全局也可在要使用的文件中用
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { PieChart } from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent
} from 'echarts/components'
import ECharts, { THEME_KEY } from 'vue-echarts'
use([
  CanvasRenderer,
  PieChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent
])

<v-chart class="chart" :option="option" />
export default {
  name: '',
  components: {
    'v-chart': ECharts
  },
  provide: {
    [THEME_KEY]: 'dark'
  },
  data () {
    return {
      //option 與原生一致
    }
  }
}

<template>
  <v-chart class="chart" :option="option" />
</template>
<script>
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { PieChart } from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent
} from 'echarts/components'
import ECharts, { THEME_KEY } from 'vue-echarts'
use([
  CanvasRenderer,
  PieChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent
])
export default {
  name: 'HelloWorld',
  components: {
    'v-chart': ECharts
  },
  provide: {
    [THEME_KEY]: 'light'
  },
  data () {
    return {
      option: {
        title: {
          text: 'Referer of a Website',
          subtext: 'Fake Data',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 1048, name: 'Search Engine' },
              { value: 735, name: 'Direct' },
              { value: 580, name: 'Email' },
              { value: 484, name: 'Union Ads' },
              { value: 300, name: 'Video Ads' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
    }
  }
}
</script>
<style scoped>
.chart {
  height: 400px;
}
</style>