Echart 使用

简介: Echart 使用

查看前端面试题小程序 大量面试题和答案,请微信查看

// var list = [1,1,54,5,5,85,8,8,5,5,8,8,85,8,8,5,5,85,88,85,8,88,8,8,8,8,88,]; //x轴的 时间
// var list1= [];  //温度数据
// var list2=[]    //湿度数据
// function initChart(canvas, width, height) {
//   const chart = echarts.init(canvas, null, {width: width,height: height});
//   canvas.setChart(chart);
//   var option = {
//     tooltip: {trigger: 'axis'},
//     color: ['#F8DF64', '#76FB4C'], //icon颜色
//     legend: {
//       data: [{name:'温度(℃)',textStyle: {color: '#333'},color:'#000'}, 
//         { name: '湿度(%RH)', textStyle: { color: '#333' }}],  y: 'bottom',
//     },
//     grid: {left: '1%',right: '1%',top: '10%',containLabel: true}, //图形的位置
//     // x坐标
//     xAxis: {type: 'category',boundaryGap: false,data: list,name: '',nameGap: 2,axisLabel: {interval: 0}},
//     // y坐标
//     yAxis: {type: 'value',min: -30,max: 120},
//     series: [
//       {
//         name: '温度(℃)',
//         type: 'line',
//         stack: '总量',
//         smooth: true,
//         itemStyle: {normal: {lineStyle: {color: '#F8DF64'}}},  
//         data: list1
//       }, {
//         name: '湿度(%RH)',
//         type: 'line',
//         smooth: true,
//         stack: '总量',
//         itemStyle: {normal: {lineStyle: {color: '#76FB4C'}}},  
//         data: list2
//       }
//     ]
//   };
//   chart.setOption(option);
//   return chart;
// }

相关文章
|
4月前
|
JavaScript 数据可视化 前端开发
echart图表
echart图表
32 0
|
27天前
|
JavaScript
如何在vue添加echarts图表
如何在vue添加echarts图表
16 0
|
4月前
|
容器
vue3中echarts图表的实现
vue3中echarts图表的实现
|
10月前
|
容器
31-Vue之ECharts-饼图
31-Vue之ECharts-饼图
|
5月前
|
资源调度 JavaScript 前端开发
vue使用echarts图表
vue使用echarts图表
36 0
|
5月前
|
JavaScript 容器
vue echarts图表自适应屏幕变化
vue echarts图表自适应屏幕变化
68 0
|
6月前
|
JSON 数据可视化 JavaScript
vue+echarts实现一个叠堆柱状图
vue+echarts实现一个叠堆柱状图
52 0
|
6月前
|
JavaScript
vue实现一个饼状图
vue实现一个饼状图
39 2
|
6月前
|
前端开发 JavaScript
Vue+Echarts实现一个饼状图
Vue+Echarts实现一个饼状图
25 0
|
6月前
|
前端开发 JavaScript
Vue+Echarts实现一个折线图
Vue+Echarts实现一个折线图
50 0