zoukankan      html  css  js  c++  java
  • Echarts 服务器端刷新前端Echarts图表

    1.前端页面js需要定义一个常量

     var dom = document.getElementById("container2");
            var myChart = echarts.init(dom);
            var option = (@Html.Raw(ViewBag.Echart));  //常量
            myChart.setOption(option); //这个是关键方法
    
            //多个图标随着web窗体的改变而改变
            window.addEventListener("resize", function () {
            myChart.resize();
            });
    
    

    2.服务器端调用前端JS,以FineUI为例

      PageContext.RegisterStartupScript(" myChart.clear();myChart.setOption(" + echartStr + ");");
                return UIHelper.Result();
    

    3.Vue中使用

         var myChart = this.$echarts.init(document.getElementById("myChart"));
          myChart.showLoading();
          myChart.hideLoading();
          myChart.setOption({
            title: { text: "在Vue中使用echarts" },
            tooltip: {},
            xAxis: {
              data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
            },
            yAxis: {},
            series: [
              {
                name: "销量",
                type: "bar",
                data: [5, 20, 36, 10, 10, 20],
              },
            ],
          });
             window.onresize=myChart.resize;  //这行代码自适应
    
  • 相关阅读:
    rem 适配
    1px实现方案
    伪类选择器
    css中如何做到容器按比例缩放
    rem移动端适配方案
    Quartz.NET实现作业调度
    iPhone X
    优化hexo访问速度-将hexo部署到云主机VPS
    网页设计命名规范
    网站注册页面
  • 原文地址:https://www.cnblogs.com/Alex-Mercer/p/12334605.html
Copyright © 2011-2022 走看看