zoukankan      html  css  js  c++  java
  • VUE中解决echarts数据二次渲染不成功的问题xAxis

    应该设置:mychart.setOption({},true);

    原因:chart.setOption(option,notMerge,lazyUpdate);

    option:图表的配置项和数据

    notMerge:可选,是否不跟之前设置的option进行合并,默认为false,即合并。(这里是导致二次渲染不成功的根本)

    lazyUpdate:可选,在设置完option后是否不立即更新图表,默认为false,即立即更新。

    methods:  

    // 商品 getGoods () { this.goodsName = this.goodsName this.charts = echarts.init(document.getElementById("goods")); var emphasisStyle = { itemStyle: { shadowBlur: 10, shadowColor: 'rgba(0,0,0,0.3)' } }; this.charts.setOption({ legend: { icon: "circle", left: '88%', top: '0%', align: 'left', //文字位置 data: ['增幅', '数量'], itemWidth: 8, // 设置宽度 itemHeight: 8, // 设置高度 bottom: 10, left: 'center', }, tooltip: { trigger: 'item', //axis 单个柱形图 axisPointer: { // 坐标轴指示器,坐标轴触发有效 type: 'shadow'// 默认为直线,可选为:'line' | 'shadow' }, formatter: (params) => { var per = params.seriesName == '增幅' ? '%' : '' return params.name + '<br/>' + params.seriesName + ' : ' + params.value + per; } }, toolbox: {}, xAxis: { data: this.xAxisData, //x轴 name: '', axisLine: { onZero: true }, splitLine: { show: false }, splitArea: { show: false } }, yAxis: [ { type: 'value', name: '数量', axisLabel: { } }, { type: 'value', name: '环比增长率', min: 0, max: this.maxProportion, interval: this.maxProportion / 5, axisLabel: { formatter: '{value}' } } ], grid: { bottom: 140 }, series: [ { name: '增幅', type: 'bar', stack: 'one', emphasis: emphasisStyle, data: this.data2, color: '#73C0DE', barWidth: '30px', itemStyle: { normal: { label: { position: 'top' } } } }, { name: '数量', type: 'bar', stack: 'one', emphasis: emphasisStyle, data: this.data1, color: '#91CC75', barWidth: '30px', itemStyle: { normal: { label: { position: 'top' } } } }, ], // 可为负值 data1 和 data2为数据 data: (this.data1 || this.data2 || []).map((item) => { return { value: item, itemStyle: { normal: { label: { show: true, position: item > 0 ? 'top' : 'bottom', textStyle: { color: '#C23531', fontSize: 12 } } } } } }), }, true); },
  • 相关阅读:
    小程序接入第三方ui库(组件库)
    element ui表格的校验和自定义校验规则
    element ui表格 表头的的特殊处理(换行/jsx风格表头)以及上传组件的一点小问题
    MongoDB 配置本地服务
    乙方渗透测试之Fuzz爆破
    SSRF漏洞挖掘经验
    SQL注入绕过技巧总结
    Xss Bypass备忘录
    bilibili存储型xss (绕过长度限制打乱顺序限制)
    XSS攻击常识及常见的XSS攻击脚本汇总
  • 原文地址:https://www.cnblogs.com/xiaoxiao2017/p/15379372.html
Copyright © 2011-2022 走看看