java中echarts的使用

echarts这个插件解决了用Java语言画曲线图难的问题
1.第一步先从后台传来两个json字符串一个是y轴的数值一个为x轴的数值，如例：
[‘老年人’,‘儿童’,‘妇女’,‘高血压’,‘糖尿病’,‘精神病’,‘冠心病’]
[0,6,1,7,6,4,4]
2.页面上css中添加
#main{ text-align: center; width: 70%; height:70%; margin: auto; position: absolute; top: 25%; left: 0; right: 0; bottom: 0; }
3.在body中加入，这是指定曲线图的要放的位置

4.在js中要写
` // 基于准备好的 dom，初始化 echarts 实例
var myChart = echarts.init(document.getElementById(‘main’));

// 指定图表的配置项和数据 ${treeString}代表[0,6,1,7,6,4,4]
  var mycars=${treeString}; 
  // ${Xaxis} 代表['老年人','儿童','妇女','高血压','糖尿病','精神病','冠心病']
 var xaxis =  ${Xaxis};

option = {
     title: {
        text: '签约统计', // 左上方正文标题
        subtext: '', // 下边的注释标题
    }, 
    tooltip: {
        trigger: 'axis' // 查看某一点的所有数据
    },
  	legend: {
        data:['人群签约'] /* '意向','预购', */ // 正上方的注释
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
  
    xAxis: { // X 轴
        type: 'category',
        boundaryGap: false, // 坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。
        data:xaxis
    },
    yAxis: { // Y 轴
        type: 'value'
    },
    
   
    series: [ // 定义线，以及每条线的参数
    
    //一个这个代表一条线 
    
    {
        name: '人群签约', // 线的名称，需要与上方定义好的注释所对应
        type: 'line', // 线的类型
        smooth: true, 
        data:mycars  // 数据
    }  
  

    ] 
}; 

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option); `

在这里插入图片描述
4.需要echarts.js在这下载，密码是fc0q
echart.js的下载路径

java中echarts的使用

猜你喜欢