vue webpack 使用 echarts

布满荆棘的人生 2022-10-12 01:21 154阅读 0赞

## vue webpack 使用 echarts ##

引入echart

npm install echarts -S

全局引用，在main.js添加如下代码

import * as echarts from 'echarts'
    Vue.prototype.$echarts = echarts

官方配置项说明地址：[官方地址][Link 1]

折线图

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvZGVjY191_size_16_color_FFFFFF_t_70_pic_center]

柱状图

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvZGVjY191_size_16_color_FFFFFF_t_70_pic_center 1]

饼图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvZGVjY191_size_16_color_FFFFFF_t_70_pic_center 2]

<template>
      <div class="hello">
        <div id="myChart" style="width: 100%;height: 400px;"></div>
      </div>
    </template>
    
    <script> export default { name: 'HelloWorld', data() { return { } }, mounted() { this.chartInit(); }, methods: { chartInit() { var myChart = document.getElementById('myChart'); var chart = this.$echarts.init(myChart); var option = { title: { text: '某站点用户访问来源', subtext: '纯属虚构', left: 'center' }, tooltip: { trigger: 'item' }, legend: { orient: 'vertical', left: 'left', }, series: [{ name: '访问来源', type: 'pie', radius: '50%', data: [{ value: 1048, name: '搜索引擎' }, { value: 735, name: '直接访问' }, { value: 580, name: '邮件营销' }, { value: 484, name: '联盟广告' }, { value: 300, name: '视频广告' } ], emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } }] }; chart.setOption(option); } } } </script>

环形饼图（中间是空的）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvZGVjY191_size_16_color_FFFFFF_t_70_pic_center 3]

<template>
      <div class="hello">
        <div id="myChart" style="width: 100%;height: 400px;"></div>
      </div>
    </template>
    
    <script> export default { name: 'HelloWorld', data() { return { } }, mounted() { this.chartInit(); }, methods: { chartInit() { var myChart = document.getElementById('myChart'); var chart = this.$echarts.init(myChart); var option = { tooltip: { trigger: 'item' }, legend: { top: '5%', left: 'center' }, series: [ { name: '访问来源', type: 'pie', radius: ['40%', '70%'], avoidLabelOverlap: false, label: { show: false, position: 'center' }, emphasis: { label: { show: true, fontSize: '40', fontWeight: 'bold' } }, labelLine: { show: false }, data: [ { value: 1048, name: '搜索引擎'}, { value: 735, name: '直接访问'}, { value: 580, name: '邮件营销'}, { value: 484, name: '联盟广告'}, { value: 300, name: '视频广告'} ] } ] }; chart.setOption(option); } } } </script>

[Link 1]: https://echarts.apache.org/zh/option.html#title
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvZGVjY191_size_16_color_FFFFFF_t_70_pic_center]: /images/20221005/5bc0792c1b054e8596cd1dc70ac1427b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvZGVjY191_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221005/3060c0795aff46ada87b307e9abaca68.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvZGVjY191_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221005/d610870601a6438cba55959826b08caa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvZGVjY191_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221005/b14943c51330495d9569a57b130d7c6f.png