VUE 中使用 Echarts 方法

  1. 云栖社区>
  2. 前端那些事儿>
  3. 博客>
  4. 正文

VUE 中使用 Echarts 方法

佀无极 2019-07-19 17:07:18 浏览453
展开阅读全文

Vue-Echarts

基于 ECharts v4.1.0+ 开发,依赖 Vue.js v2.2.6+。

安装

npm install echarts vue-echarts

使用方法

example.vue组件 这里是柱状图、折线图示例
Echarts 配置参考官方文档 https://echarts.baidu.com
通过指令绑定 options 参数来实现
自定义方法 initBar() 可以 axios 请求来实现动态渲染
代码如下

<template>
  <v-chart :options="themonth"/>
  <v-chart :options="thebar"/>
  <v-chart :options="theline"/>
</template>
<script>
  import ECharts from 'vue-echarts'// 在 webpack 环境下指向 components/ECharts.vue
  // 手动引入 ECharts 各模块来减小打包体积,柱状图就引入 bar 折线图就引入 line,用到什么就引入什么
  import 'echarts/lib/chart/bar'//柱状图
  import 'echarts/lib/chart/line'//折线图
  import 'echarts/lib/component/tooltip'//提示框组件
  import 'echarts/lib/component/title'
  import 'echarts/lib/component/legend'
  import 'echarts/lib/component/polar'
  
  export default {
      name: "tables",
      components: {
        'v-chart': ECharts
      },
      data () {
        return {
          theline: null,
          thebar: null,
          themonth: null
        }
      },
      mounted: function () {
        this.initBar()
        this.initLine()
        this.initMonth()
      },
      methods: {
        initBar() {
          //this.axios.get('/url').then((data) => {this.polar={}}
          let data_title = ['个人医疗花费', '同族群医疗花费'];
          let cities = ['1年', '2年', '3年', '4年', '5年', '6年', '7年', '8年', '9年', '10年'];
          let param_a = [111112,111113,111114,111115,111116,111117,111118,111119,111110,11111];
          let param_c = [511111,411111,311111,211111,111111,611111,911111,811111,911111,711111];
          let obj = {
            m10: {
              compare_yearsfee: '9'
            }
          };
          this.thebar = {
            legend: {
              show: true,
              data: data_title,
              textStyle:{
                color: '#333'
              },
              top: 2,
              left: 10
            },
            tooltip: {
              trigger: 'axis',
              formatter: (obj.m10.compare_yearsfee == '')? '{b}<br />{a0}:{c0}元' : '{b}<br />{a0}:{c0}元<br />{a1}:{c1}元'
            },
            grid: {
              top: 56,
              left: 18,
              right: 26,
              bottom: 6,
              containLabel: true
            },
            color: ['#0f0', '#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3'],
            xAxis: {
              type: 'category',
              data: cities,
              boundaryGap: true,//两边留白
              splitLine: {
                show: false, //隐藏分割线
                lineStyle: {
                  color: '#ddd',
                  type: 'solid'
                },
                //interval: 3,
              },
              axisLine: {
                lineStyle: {
                  color: '#ddd',
                },
              },
              axisTick: {
                show: false,
              },
              axisLabel: { //轴线刻度设置
                //interval: 1,
                formatter: '{value}',
                color: '#E6E8EB'
              },
            },
            yAxis: [{
              type: 'value',
              axisLabel: {
                formatter: '{value}',
                margin: 15,
                color: '#E6E8EB'
              },
              name: '¥        ',
              nameGap: 6,
              splitLine: {
                show: true,
                lineStyle: {
                  color: '#ddd',
                  type: 'solid'
                }
              },
              axisLine: {
                show: false,
                lineStyle: {
                  color: '#ddd'
                },
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                formatter: '{value}',
                margin: 15,
                color: '#E6E8EB'
              }
            }],
            series: [{
              name: '个人医疗花费',
              type: 'bar',
              itemStyle: {
                normal: {
                  color: '#6D92EE',
//                            shadowColor : 'rgba(0,0,0,0.5)',
//                            shadowBlur: 8,
//                            shadowOffsetX: 8,
//                            shadowOffsetY: 10,
                  barBorderRadius: [5, 5, 0, 0]
                },
              },
//                    itemStyle: {
//                        normal: {
//                            color: '#1586ec'
//                        }
//                    },
              data: param_a,
              //legendHoverLink: false,
              // emphasis: {
              //   itemStyle: {
              //     color: '#6D92EE'
              //   }
              // }
            }, {
              name: '同族群医疗花费',
              type: 'bar',
              itemStyle: {
                normal: {
                  color: '#E6E8EB',
                  barBorderRadius: [5, 5, 0, 0]
                },
              },
              data: param_c,
              //legendHoverLink: false,
              barCategoryGap:'50%',
              // emphasis: {
              //   itemStyle: {
              //     color: '#E6E8EB'
              //   }
              // }
            }],
            animationDuration: 2000,
            silent: true
          }

        },
        initLine (){
          var obj = {
            m01: {
              "lift_rates":[80.6,80.3,80,79.7,79.3,79,78.6,78.1,77.7,77.3,76.8,76.3,75.7,75.2,74.6,74.1,73.5,72.8,72.2,71.5,70.8,70.1,69.3,68.4,67.6,66.6,65.7,64.4,63.1,61.8,60.4,58.8,57.2,55.4,53.5,51.3,48.8,46.2,43.5,40.7,37.7,34.7,31.7,28.9,26.1,23.3,20.5,18.1,15.7,13.5,11.3,9.6,7.9,6.3,5,3.9,3,2.3],
              "lost_ability":23.93,
              "pre_rem":30.11,
              "heal_rates":[75.1,74.6,73.9,73.3,72.7,72,71.4,70.7,69.9,69.2,68.4,67.7,66.9,66,65.1,64.3,63.4,62.5,61.5,60.5,59.5,58.5,57.5,56.3,55.2,54,52.8,51.4,49.9,48.4,46.9,45.3,43.6,41.9,40.1,38.1,35.9,33.7,31.5,29.2,26.8,24.6,22.4,20.3,18.3,16.2,14.2,12.5,10.8,9.3,7.8,6.5,5.4,4.3,3.4,2.7,2.1,1.6],
              "lift_fee":196719,
              "rates_ages":[42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99],
              "pre_lift":71.11,
              "lost_heal_ratio":["7.3","7.6","8.3","8.7","9.1","9.7","10.1","10.5","11.2","11.7","12.3","12.7","13.2","13.9","14.6","15.2","15.9","16.5","17.4","18.2","19.0","19.8","20.5","21.5","22.5","23.3","24.4","25.3","26.5","27.7","28.8","29.8","31.2","32.2","33.4","34.6","35.9","37.1","38.1","39.4","40.7","41.1","41.5","42.4","42.6","43.8","44.4","44.8","45.4","45.2","44.9","47.7","46.3","46.5","47.1","44.4","42.9","43.8"]
            }
          };
          var n = Math.ceil(obj.m01.pre_lift);
          var tmp_a = parseInt(n) - parseInt(obj.m01.rates_ages[0]) + 1;
          var age = (obj.m01.rates_ages).slice(0,tmp_a);
          var survival = (obj.m01.lift_rates).slice(0,tmp_a);
          var disability = (obj.m01.lost_heal_ratio).slice(0,tmp_a);
          this.theline = {
            legend: {
              data: ['健康率', '失能率'],
              textStyle: {
                color: '#000'
              },
              top: 0,
              right: 12,
            },
            tooltip: {
              trigger: 'axis',
              formatter: '{b}岁<br />{a0}:{c0}%<br />{a1}:{c1}%'
            },
            grid: {
              top: 46,
              left: 8,
              right: 22,
              bottom: 10,
              containLabel: true,
            },
            color: ['#0f0', '#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3'],
            //                toolbox: {
            //                    feature: {
            //                        saveAsImage: {}
            //                    }
            //                },
            xAxis: {
              type: 'category',
              data: age,
              boundaryGap: false,
              splitLine: {
                show: true, //隐藏分割线
                lineStyle: {
                  color: '#f5f5f5',
                  type: 'solid'
                },
                //interval: 3,
              },
              axisLine: {
                show: false,
                lineStyle: {
                  color: '#a9a8a8',
                },
              },
              axisTick: {
                show: false
              },
              axisLabel: { //轴线刻度设置
                //interval:6,
                formatter: '{value}岁',
              },
            },
            yAxis: [{
              type: 'value',
              min: 0,
              max: 100,
              axisLabel: {
                color: '#a9a8a8',
                formatter: '{value}%'
              },
              axisTick: {
                show: false
              },
              axisLine: {
                lineStyle: {
                  color: '#f5f5f5'
                },
              },
              interval: 25,
              splitLine: {
                show: false,
                lineStyle: {
                  color: '#ddd',
                  type: 'solid'
                }
              }
            },{
              type: 'value',
              axisLine: {
                lineStyle: {
                  color: '#f5f5f5',
                  type: 'solid'
                }
              }
            }],
            series: [{
              name: '健康率',
              type: 'line',
              lineStyle: {
                normal: {
                  width: 3,
                  color: '#6293f5',
                  shadowColor : 'rgba(0,0,0,0.5)',
                  shadowBlur: 8,
                  shadowOffsetX: 8,
                  shadowOffsetY: 10
                },
              },
              itemStyle: {
                normal: {
                  color: '#6293f5'
                }
              },
              data: survival,
              showSymbol: false
            }, {
              name: '失能率',
              type: 'line',
              lineStyle: {
                normal: {
                  width: 3,
                  color: '#f5495b',
                  shadowColor: 'rgba(0,0,0,0.5)',
                  shadowBlur: 8,
                  shadowOffsetX: 8,
                  shadowOffsetY: 10
                },
              },
              itemStyle: {
                normal: {
                  color: '#f5495b'
                }
              },
              data: disability,
              showSymbol: false
            }]
          }
        },
        initMonth(){
          this.themonth = {
            tooltip: {
              trigger: 'axis'
            },
            grid: {
              top: '3%',
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: [{
              type: 'category',
              boundaryGap: false,
              data: ['1号', '2号', '3号', '4号', '5号', '6号', '7号', '8号', '9号', '10号',
                '11号', '12号', '13号', '14号', '15号', '16号', '17号', '18号', '19号', '20号',
                '21号', '22号', '23号', '24号', '25号', '26号', '27号', '28号', '29号', '30号', '31号'
              ]
            }],
            yAxis: [{
              type: 'value'
            }],
            textStyle: {
              color: '#838FA1'
            },
            series: [{
              name: '新增用户',
              type: 'line',
              stack: '总量',
              areaStyle: {
                normal: {}
              },
              data: [120675, 118962, 101754, 114865, 119076, 111752, 123965, 120363, 113435, 112065,
                125042, 120278, 138703, 136790, 135708, 150287, 163187, 150569, 157826, 182633,
                199375, 195334, 205617, 220527, 234721, 240938, 239065, 263334, 285365, 302602, 361553
              ],
              itemStyle: {
                normal: {
                  color: '#1cabdb',
                  borderColor: '#1cabdb',
                  borderWidth: '2',
                  borderType: 'solid',
                  opacity: '1'
                },
                emphasis: {

                }
              }
            }]
          }
        }
      },
    }
</script>

网友评论

登录后评论
0/500
评论
佀无极
+ 关注
所属云栖号: 前端那些事儿